RadioGroup

Exactly one of several options.

import { RadioGroup } from '@textui/widgets';

<RadioGroup
  label="Theme"
  options={[
    { value: 'plain', label: 'Plain' },
    { value: 'console', label: 'Console' },
  ]}
  value="plain"
  onChange={(value) => console.log(value)}
/>

Props

| Prop | Type | Default | | | — | — | — | — | | options | RadioOption[] | required | | | value | string | | | | onChange | (value: string) => void | | | | label | string | | | | inline | boolean | | Lay the options out in a row instead of a column. | | autoFocus | boolean | | Take the keyboard on arrival. |

Plus everything on BoxProps.

Role: radio.

The whole group is one stop in the tab order and the arrow keys move within it, which is what a group of radios is supposed to do and what a row of checkboxes cannot.

inline lays them along a row. Past about four options a Select costs one row instead of four and is easier to scan.

See also

• Editing keys and selection - the keys, the selection and the clipboard
• Select - the same choice, collapsed
• Checkbox - when more than one may be true