Radio
@xui/radioA single-choice group. The group owns the value, the shared name and a single tab stop — arrow keys move between options per the WAI-ARIA radio pattern. Bind forms to the group, never to individual radios.
Install
pnpm add @xui/radio Add the barrel to a standalone component's imports:
import { XuiRadioImports } from '@xui/radio';
@Component({
imports: [XuiRadioImports],
// …
})Examples
Default
Loading preview…
<xui-radio-group [(value)]="plan" aria-label="Plan">
<label class="flex items-center gap-2 text-sm"><xui-radio value="free" /> Free</label>
<label class="flex items-center gap-2 text-sm"><xui-radio value="pro" /> Pro</label>
<label class="flex items-center gap-2 text-sm"><xui-radio value="team" /> Team</label>
</xui-radio-group>
<p class="text-foreground-muted mt-3 text-sm">Selected: {{ plan }}</p>Horizontal
Loading preview…
<xui-radio-group [(value)]="size" orientation="horizontal" aria-label="Size">
<label class="flex items-center gap-2 text-sm"><xui-radio value="sm" /> Small</label>
<label class="flex items-center gap-2 text-sm"><xui-radio value="md" /> Medium</label>
<label class="flex items-center gap-2 text-sm"><xui-radio value="lg" /> Large</label>
<label class="flex items-center gap-2 text-sm opacity-60"><xui-radio value="xl" disabled /> XL (soon)</label>
</xui-radio-group>Disabled
Loading preview…
<xui-radio-group value="a" disabled aria-label="Disabled group">
<label class="flex items-center gap-2 text-sm"><xui-radio value="a" /> One</label>
<label class="flex items-center gap-2 text-sm"><xui-radio value="b" /> Two</label>
</xui-radio-group>API
A single-choice group of radios.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''orientation'vertical' | 'horizontal'Layout of the options.this.config.orientationnamestringThe shared name for the radios in the group, so the browser treats them as one set. Defaults to a generated unique name.uniqueId('xui-radio-group')ariaLabelstring | nullAccessible name for the group — what is being chosen.nullariaLabelledbystring | nullId of an element naming the group. Use it instead of aria-label when that text is already on screen.nullvalueT | nullThe chosen value. Works two-way and via ngModel/formControl.nulldisabledbooleanDisable every radio in the group at once.falseMethods
select(value: T): voidisFirstEnabled(value: T): booleanWhich option holds the single tab stop: the selected one, or — when nothing is selected yet — the first enabled option, so Tab always lands somewhere.One option within a xui-radio-group.
Variants
sizemdInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''sizeXuiRadioVariants['size']Button size, from the shared control scale.this.config.sizevalueTWhat the group's value becomes when this radio is chosen. Must be unique within the group.disabledbooleanDisable this radio alone. A radio in a disabled group is disabled regardless.falseMethods
focus(): void