Forms

Checkbox

Checkboxes allow users to select multiple options, enhancing usability with a clear, efficient method for making selections.

View Figma UI Kit

View GitHub repo

WCAG 2.1 accessibility compliant

Default

Checkbox

Selected

Checkbox

React Native

<Label 
  className='text-lg font-medium'
  accessibilityRole="header"
  accessibilityLevel={2}
  nativeID="checkbox-section-header"
>
  Checkbox
</Label>
<View 
  className='flex-row gap-3 items-center'
  accessibilityRole="none"
  importantForAccessibility="no"
>
  <Checkbox 
    aria-labelledby='terms' 
    checked={checked} 
    onCheckedChange={setChecked}
    accessibilityRole="checkbox"
    accessibilityState={{ 
      checked: checked,
      disabled: false 
    }}
    accessibilityHint="Toggle acceptance of terms and conditions"
    accessibilityLiveRegion="polite"
  />
  <Label 
    nativeID='terms' 
    onPress={() => setChecked((prev) => !prev)}
    accessibilityRole="text"
    accessibilityHint="Tap to toggle checkbox"
  >
    Accept terms and conditions
  </Label>

Checkbox tile / Default

Radio tile

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Checkbox tile / Selected

Checkbox tile

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

React Native

<Label 
  className='text-lg font-medium'
  accessibilityRole="header"
  accessibilityLevel={2}
  nativeID="checkbox-tile-section-header"
>
  Checkbox Tile
</Label>

<CheckboxTile
  title='Checkbox tile'
  description='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
  icon={<Globe size={24} accessibilityElementsHidden={true} />}
  checked={tileChecked}
  onCheckedChange={setTileChecked}
  accessibilityRole="checkbox"
  accessibilityLabel="Checkbox tile"
  accessibilityHint="Toggle checkbox tile selection"
  accessibilityState={{ 
    checked: tileChecked,
    disabled: false 
  }}
  accessibilityLiveRegion="polite"
/>

<CheckboxTile
  title='Email notifications'
  description='Receive email notifications when someone mentions you.'
  icon={<Mail size={24} accessibilityElementsHidden={true} />}
  checked={emailChecked}
  onCheckedChange={setEmailChecked}
  accessibilityRole="checkbox"
  accessibilityLabel="Email notifications"
  accessibilityHint="Toggle email notifications"
  accessibilityState={{ 
    checked: emailChecked,
    disabled: false 
  }}
  accessibilityLiveRegion="polite"
/>

<CheckboxTile
  title='Push notifications'
  description='Allow the app to send you push notifications.'
  icon={<Bell size={24} accessibilityElementsHidden={true} />}
  checked={notificationsChecked}
  onCheckedChange={setNotificationsChecked}
  accessibilityRole="checkbox"
  accessibilityLabel="Push notifications"
  accessibilityHint="Toggle push notifications"
  accessibilityState={{ 
    checked: notificationsChecked,
    disabled: false 
  }}
  accessibilityLiveRegion="polite"

WCAG 2.1 accessibility checks

1.3.1 Info and Relationships (Level A)

1.4.3 Contrast (Minimum) (Level AA)

2.4.6 Headings and Labels (Level AA)

4.1.2 Name, Role, Value (Level A)

4.1.3 Status Messages (Level AA)

Tooltip

Text Input