Radio
A set of options where exactly one can be selected. For two to five visible options, use Radio; for longer lists, use Dropdown.
Email digest
Code
demo.tsx
import {Fieldset, Radio, SelectionControlAndLabel, Stack} from '@earendil-works/elanor-react';
const frequencies = ['Daily', 'Weekly', 'Monthly'];
export default function RadioDemo() {
return (
<Fieldset.Root render={<Radio.Group defaultValue="Weekly" />}>
<Fieldset.Legend>Email digest</Fieldset.Legend>
<Stack gap="small">
{frequencies.map((frequency) => (
<SelectionControlAndLabel
key={frequency}
control={
<Radio.Root value={frequency}>
<Radio.Indicator />
</Radio.Root>
}
>
{frequency}
</SelectionControlAndLabel>
))}
</Stack>
</Fieldset.Root>
);
}Usage
import {Fieldset, Radio, SelectionControlAndLabel} from '@earendil-works/elanor-react';
<Fieldset.Root render={<Radio.Group />}>
<Fieldset.Legend>Email digest</Fieldset.Legend>
<SelectionControlAndLabel
control={
<Radio.Root value="daily">
<Radio.Indicator />
</Radio.Root>
}
>
Daily
</SelectionControlAndLabel>
</Fieldset.Root>;Label the group with Fieldset. Arrow keys move between options.
Disabled
Disable a single option with disabled on Radio.Root, or the whole group on Fieldset.Root.
Support plan
Code
disabled.tsx
import {Fieldset, Radio, SelectionControlAndLabel, Stack} from '@earendil-works/elanor-react';
export default function RadioDisabled() {
return (
<Fieldset.Root render={<Radio.Group defaultValue="Standard" />}>
<Fieldset.Legend>Support plan</Fieldset.Legend>
<Stack gap="small">
<SelectionControlAndLabel
control={
<Radio.Root value="Standard">
<Radio.Indicator />
</Radio.Root>
}
>
Standard
</SelectionControlAndLabel>
<SelectionControlAndLabel
control={
<Radio.Root value="Priority" disabled>
<Radio.Indicator />
</Radio.Root>
}
>
Priority (Enterprise only)
</SelectionControlAndLabel>
</Stack>
</Fieldset.Root>
);
}API
Radio.Group
Accepts Base UI RadioGroup props.
Radio.Root
Accepts Base UI Radio.Root props.
Radio.Indicator
Accepts Base UI Radio.Indicator props.