inputs
Selection controls
Content selection and toggles
Features
- Keyboard accessible
- Multiple sizes
- Themes ready
Anatomy
import { Checkbox, Radio, Toggle } from "@wonderflow/react-components";
export default () => {
return (
<>
<Checkbox label="Label 1" />
<Radio label="Label 2" />
<Toggle label="Label 3" />
</>
);
};
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
Name | Description |
---|---|
tab | Move focus on the element or outside |
space | Activate or deactivate the element |
arrowDown | Inside radio groups, moves focus on the next element |
arrowUp | Inside radio groups, moves focus on the previous element |
arrowLeft | Inside radio groups, moves focus on the previous element |
arrowRight | Inside radio groups, moves focus on the next element |