Forms

Radio

Radio buttons let users choose a single option from a set, streamlining decision-making with a clear, organised method for accurate selections.

View Figma UI Kit

View GitHub repo

WCAG 2.1 accessibility compliant

Default

Radio

Selected

Radio

React Native

<Label 
  className='text-lg font-medium mb-6'
  accessibilityRole="header"
  accessibilityLevel={2}
  nativeID="radio-section-header"
>
  Radio
</Label>
<RadioGroup 
  value={value} 
  onValueChange={setValue} 
  className='gap-3'
  accessibilityRole="radiogroup"
  accessibilityLabel="Display options"
  accessibilityHint="Select your preferred option"
  accessibilityLiveRegion="polite"
>
  <RadioGroupItemWithLabel 
    value='Default' 
    onLabelPress={onLabelPress('Default')}
    accessibilityRole="radio"
    accessibilityLabel="Default option"
    accessibilityState={{ 
      checked: value === 'Default',
      disabled: false 
    }}
  />
  <RadioGroupItemWithLabel
    value='Comfortable'
    onLabelPress={onLabelPress('Comfortable')}
    accessibilityRole="radio"
    accessibilityLabel="Comfortable option"
    accessibilityState={{ 
      checked: value === 'Comfortable',
      disabled: false 
    }}
  />
  <RadioGroupItemWithLabel 
    value='Compact' 
    onLabelPress={onLabelPress('Compact')}
    accessibilityRole="radio"
    accessibilityLabel="Compact option"
    accessibilityState={{ 
      checked: value === 'Compact',
      disabled: false 
    }}
  />
</RadioGroup>

Radio tile / Default

Radio tile

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Radio tile / Selected

Radio tile

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

React Native

<Label 
  className='text-lg font-medium mb-2'
  accessibilityRole="header"
  accessibilityLevel={2}
  nativeID="radio-tile-section-header"
>
  Radio Tile
</Label>
<RadioGroup 
  value={layoutValue} 
  onValueChange={setLayoutValue}
  accessibilityRole="radiogroup"
  accessibilityLabel="Layout options"
  accessibilityHint="Select your preferred layout style"
  accessibilityLiveRegion="polite"
>
  <View className='gap-4'>
    <RadioTile
      title='Default layout'
      description='Standard layout with balanced spacing and elements.'
      icon={
        <Globe 
          size={24} 
          accessibilityRole="image"
          accessibilityLabel="Globe icon"
        />
      }
      value='default'
      accessibilityRole="radio"
      accessibilityState={{ 
        checked: layoutValue === 'default',
        disabled: false 
      }}
      accessibilityLabel="Default layout - Standard layout with balanced spacing and elements"
    />

    <RadioTile
      title='Compact layout'
      description='Reduced spacing for more content on screen.'
      icon={
        <Mail 
          size={24} 
          accessibilityRole="image"
          accessibilityLabel="Mail icon"
        />
      }
      value='compact'
      accessibilityRole="radio"
      accessibilityState={{ 
        checked: layoutValue === 'compact',
        disabled: false 
      }}
      accessibilityLabel="Compact layout - Reduced spacing for more content on screen"
    />

    <RadioTile
      title='Expanded layout'
      description='More space between elements for better readability.'
      icon={
        <Bell 
          size={24} 
          accessibilityRole="image"
          accessibilityLabel="Bell icon"
        />
      }
      value='expanded'
      accessibilityRole="radio"
      accessibilityState={{ 
        checked: layoutValue === 'expanded',
        disabled: false 
      }}
      accessibilityLabel="Expanded layout - More space between elements for better readability"
    />
  </View>
</RadioGroup>

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)

Phone Input

Select