Foundation component · Forms

Radio

Show a small set of mutually exclusive choices and keep every option visible.

Live playground

Radio label

Choose Radio when

People must choose one option from a short, stable set.
Use Select when the list is longer or space is constrained.
Use Checkbox when more than one option can be selected.

Group behavior

Give the group a visible or accessible name that frames the decision.
Base UI manages single selection and arrow-key movement within the group.
Write labels as parallel choices, not as unrelated commands.

Implementation

Root defines the named choice set; each Item composes its indicator and label.

import { RadioGroup } from "@lenso/ui/radio";

<RadioGroup.Root defaultValue="compact">
  <RadioGroup.Item value="compact">
    <RadioGroup.Indicator />
    Compact
  </RadioGroup.Item>
</RadioGroup.Root>;