RadioGroup

Allows users to select a single option from a set of choices.

Report Issue Github

Usage

Basic RadioGroup

Display a standard RadioGroup:


<RadioGroup
  id="group1"
  variant={'ghost'}
  highContrast
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ]}
  radius={'full'}
  defaultValue={'option2'}
/>

Color & Radius

Alter the visual appearance using the color, radius, and other props:


<RadioGroup
  id="group2"
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ]}
  defaultValue={'option2'}
  variant={'ghost'}
  color="grass"
  size="small"
  radius="full"
/>

Disabled

Prevent interactions with a disabled checkbox.


<RadioGroup
  id="group"
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ]}
  disabled
  defaultValue={'option2'}
  variant={'ghost'}
  radius="full"
/>

Sizes

Demonstrate radios of different sizes:


<Flex direction="column">
  <RadioGroup id="group3" highContrast options={[{ value: 'option1', label: 'Option 1' }]} defaultValue={'option1'} size="small" />
  <RadioGroup id="group4" highContrast options={[{ value: 'option2', label: 'Option 1' }]} defaultValue={'option2'} size="medium" />
  <RadioGroup id="group5" highContrast options={[{ value: 'option3', label: 'Option 3' }]} defaultValue={'option3'} size="large" />
</Flex>

API

Props

RadioGroup

Prop	Type	Default	Required
`options`	`RadioOption[]`	-	Yes
`id`	`string`	-	Yes
`variant`	`'solid' \| 'ghost' \| 'outlined'`	-	-
`defaultValue`	`string`	-	-
`disabled`	`boolean`	-	-
`onChange`	`Function`	-	-
`MarginProps`	`Token<MarginProps>`	-	-
`color`	`ThemeAccentColor`	-	-
`radius`	`ThemeRadius`	-	-
`size`	`Responsive<Size>`	`'medium'`	-

RadioOption

Prop	Type	Default	Required
`value`	`string`	-	Yes
`label`	`string`	-	-

Form

Segmented