Skip to content
FormsGenerated from the public API

Radio

One of a few mutually exclusive options, with roving focus and arrow-key movement.

@luc/ui

Examples

A vertical group

One choice from a few options. Arrow keys move the selection and only the selected item is in the tab order — the roving-focus contract a `div` full of radios would have to reimplement.

The default cadence.

Horizontal

The layout is the caller's: the group stays a real `radiogroup`, and a row is a flex container around it.

Invalid and disabled

`invalid` sits on the item, because that is where the treatment is rendered; `disabled` on the group keeps the current choice readable while the question is closed.

Usage

import { Radio, RadioGroup } from "@luc/ui";
<RadioGroup defaultValue="monthly" aria-label="Rebalance">
  <Radio value="weekly" label="Weekly" />
  <Radio value="monthly" label="Monthly" />
</RadioGroup>

Package setup — peer requirements, the stylesheet and the provider — is on installation.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
ExportKindSignature
Radio7 documented props({ className, label, description, id, disabled, invalid, ...props }: RadioProps) => import("@types/react").JSX.Element
RadioGroup11 documented propsimport("@types/react").ForwardRefExoticComponent<RadixRadioGroup.RadioGroupProps & import("@types/react").RefAttributes<HTMLDivElement>>

Radio props

Type: RadioProps

Values the compiler reads from the declaration.

Radio props
PropTypeDefaultNotes
asChild?inheritedboolean | undefined—
checked?inheritedboolean | undefined—
description?ReactNode—
invalid?boolean | undefined—
label?ReactNode—
required?inheritedboolean | undefined—
valueinheritedstring—

RadioGroup props

Type: RadioGroupProps & RefAttributes<HTMLDivElement>

Values the compiler reads from the declaration.

RadioGroup props
PropTypeDefaultNotes
asChild?inheritedboolean | undefined—
defaultValue?inheritedstring | undefined—
dir?inheritedDirection | undefined—
disabled?inheritedboolean | undefined—
form?inheritedstring | undefined—
loop?inheritedboolean | undefined—
name?inheritedstring | undefined—
onValueChange?inherited((value: string) => void) | undefined—
orientation?inherited"horizontal" | "vertical" | undefined—
required?inheritedboolean | undefined—
value?inheritedstring | null | undefined—

Guidelines

Do

  • Use a radio group for one answer out of a few when the options should all stay visible; a `Select` hides them behind a click.
  • Let the group own the value and the layout be yours: the component is the Radix root, so a row is a flex container around it.
  • Give the item its `description` when the options need a sentence each, and `invalid` when the form rejected the answer.

Don't

  • Use a radio group for an on/off setting — that is a `Switch`, and for a submitted yes/no it is a `Checkbox`.
  • Build the group out of a `div` and separate radios: the roving focus, the arrow keys and the single tab stop are the contract you would have to reimplement.
  • Set `invalid` on the group: the treatment lives on the item, which is what the compiler's prop table says.

Accessibility

The group is a real `radiogroup` with roving focus: one tab stop for the whole set, and the arrow keys move the selection. `disabled` on the group keeps the current answer visible while closing the question, and an item's `description` is wired to that item rather than to the group.

Family

Forms

Inputs, their validation surfaces and the form lifecycle around them.

24 documented entries in this family. Open the family index

Related

Luc UI v1.0Radiodark theme