inputs

Selection controls

Content selection and toggles

Features

Keyboard accessible
Multiple sizes
Themes ready

Links

Open in playground Open in Storybook View source ARIA checkbox design ARIA radio design ARIA checkbox auth. ARIA radio auth.

Label 1Label 2Label 3

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

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