RadioGroup

Exactly one of several options.

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

<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. |

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

  • Select - the same choice, collapsed
  • Checkbox - when more than one may be true

Back to top

MIT licensed. Pre-1.0 - the surface is still moving.