Skip to main content
‌
‌

Selection controls

Content selection and toggles

Quick nav

Features

  • Keyboard accessible
  • Multiple sizes
  • Themes ready

Links

View source Report an issue ARIA checkbox design ARIA radio design ARIA checkbox auth. ARIA radio auth.

Anatomy

import { Checkbox, Radio, Toggle } from "@wonderflow/react-components";


export default () => {
  return (
    <>

      <Checkbox />

      <Radio />

      <Toggle />

    </>
  );
};

tsx

API Reference

Property
Type
Default
disabled
boolean
indeterminate
boolean
dimension
enum
big
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

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