Radio Group | Surflane

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

No preview action taken.

Usage

Choose one of several mutually exclusive options. Give the group and each item a name.

Don't place a lone Radio without a name. Put each Radio in a named RadioGroup. Don't treat a selection change as submitting the whole form. Leave submission to the form's submit button.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

RadioGroup → ChoiceLabel(control) → Radio.Root(value) / Indicator + text

Keyboard and accessibility

Tab moves focus to the selected item. Arrow keys move the selection and skip disabled items.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { ChoiceLabel, RadioGroup, Radio } from '@surflane/ui'

<RadioGroup name='source' defaultValue='live' aria-label='Log source'>
  {['live', 'simulation'].map((value) => (
    <ChoiceLabel
      key={value}
      control={
        <Radio.Root value={value}>
          <Radio.Indicator />
        </Radio.Root>
      }
    >
      {value}
    </ChoiceLabel>
  ))}
</RadioGroup>

Key API

Radio Group — common wrapper props
Prop	Contract	Default
`value / defaultValue / onValueChange`	generic value and change callback	—
`name / required / readOnly / disabled`	group form and interaction state	— / false
`Radio.Root.value`	option value	required
`Radio.Root.size`	small \| default \| large	surrounding size

The table lists the common wrapper's main props. See the package type declarations for the full types.