v14.0.8


inputs

Selection controls

Content selection and toggles

Anatomy

import { Checkbox, Radio, Toggle } from "@wonderflow/react-components";
export default () => { return ( <>
<Checkbox label="Label 1" />
<Radio label="Label 2" />
<Toggle label="Label 3" />
</> ); };

tsx

API Reference

PROPERTY
TYPE
DEFAULT
disabled
boolean
indeterminate
boolean
dimension
enum
regular
label
string
onChange
enum

Accessibility

<Checkbox /> adheres to the checkbox role requirements. <Radio /> adheres to the radio role requirements.

Both components require an associated label element and id to describes the field.

Keyboard interactions

NameDescription
tabMove focus on the element or outside
spaceActivate or deactivate the element
arrowDownInside radio groups, moves focus on the next element
arrowUpInside radio groups, moves focus on the previous element
arrowLeftInside radio groups, moves focus on the previous element
arrowRightInside radio groups, moves focus on the next element

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024