Radio
A single option whose selection is owned by a radio group.
Contract
| Decision | Choose |
|---|---|
| composition | place every TRRadio.Root inside TRRadioGroup |
| selection | give each root a unique value; the group owns the selected value |
| size | md or lg; default md |
| item availability | use root readOnly or disabled only when one option differs from the group |
Pair each root with a TRField.Label inside a TRField.Item for a visible, clickable option label; the item scopes its label to the radio inside it, so no id or htmlFor is needed. Every TRField.Item needs a TRField.Root ancestor, so wrap the item — or the whole group — in one TRField.Root.
A radio is not a standalone boolean control. Use TRCheckbox or TRSwitch when one independent value can be turned on and off.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/radio.css';Scroll inside the code area to read long lines.
Imports
import { TRRadio } from '@tinyrack/ui/components/radio';
import { TRRadioGroup } from '@tinyrack/ui/components/radio-group';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Show selection
Unselected and selected permalink
Selection is meaningful only in relation to the value owned by a group.
Match the control density
Change one option's availability
Editable, read only, and disabled permalink
Prefer group-level availability when every option has the same state.
API
Root
| Prop | Type / default | Purpose |
|---|---|---|
value | unknown | Identifies this option in its group. |
uiSize | 'md' | 'lg', 'md' | Sets the visual glyph size. |
disabled, readOnly | boolean, inherited / false | Overrides availability for one option. |
inputRef, ref | input ref, root ref | Accesses the hidden input or visual root. |
Selection changes are reported by TRRadioGroup.onValueChange, not the root. Root forwards native props and events and supports Base UI render plus state-driven className and style.
Indicator and accessibility
TRRadio.Indicator mounts while selected unless keepMounted is set. Give the group and every option accessible names. Arrow-key navigation, form ownership, required validation, and reset belong to TRRadioGroup.
The module exports TRRadio, both named parts, their prop and state types, and TRRadioUiSize. CSS is opt-in.