Forms & Inputs
Radio Button
A button-styled radio option — interchangeable with nana-radio inside a nana-radio-group. Inside a horizontal group the buttons read as a segmented control. The group owns selection, keyboard roving and form association; on its own one still renders, selects and fires nana-change.
A button-styled radio option — interchangeable with nana-radio inside a
nana-radio-group. Inside a horizontal group the
buttons read as a segmented control. The group owns selection, keyboard roving
and form association; on its own one still renders, selects and fires
nana-change.
Preview
Section titled “Preview”<nana-radio-group
label="Billing period"
orientation="horizontal"
value="monthly"
>
<nana-radio-button value="monthly">Monthly</nana-radio-button>
<nana-radio-button value="yearly">Yearly</nana-radio-button>
<nana-radio-button value="lifetime">Lifetime</nana-radio-button>
</nana-radio-group>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/radio-button";Already registered if you imported @nana-tec/ui-components/radio-group.
Basic usage
Section titled “Basic usage”<nana-radio-group label="Billing period" orientation="horizontal" value="monthly"> <nana-radio-button value="monthly">Monthly</nana-radio-button> <nana-radio-button value="yearly">Yearly</nana-radio-button></nana-radio-group>The segmented control
Section titled “The segmented control”orientation="horizontal" on the group is what makes a row of these read as
one segmented control. In a vertical group they stay as separate stacked
buttons — useful when the options are long, or when each needs its own
description.
<nana-radio-group label="Vertical" orientation="vertical" value="a">
<nana-radio-button value="a">First option</nana-radio-button>
<nana-radio-button value="b">Second option</nana-radio-button>
</nana-radio-group>
<nana-radio-group label="Horizontal" orientation="horizontal" value="a">
<nana-radio-button value="a">First</nana-radio-button>
<nana-radio-button value="b">Second</nana-radio-button>
</nana-radio-group>Mixing flavours
Section titled “Mixing flavours”nana-radio and nana-radio-button are interchangeable children of the same
group, so a form can use a circle where it needs a description and a button
where it does not.
<nana-radio-group label="Delivery" orientation="vertical" value="standard"> <nana-radio-button value="standard">Standard</nana-radio-button> <nana-radio value="express" label="Express" description="Next working day"></nana-radio></nana-radio-group>size is sm, md (default) or lg. Set it on the group to size every child
at once, or on a single option to override it.
<nana-radio-group label="Small" size="sm" orientation="horizontal" value="a">
<nana-radio-button value="a">Small</nana-radio-button>
<nana-radio-button value="b">Small</nana-radio-button>
</nana-radio-group>
<nana-radio-group label="Large" size="lg" orientation="horizontal" value="a">
<nana-radio-button value="a">Large</nana-radio-button>
<nana-radio-button value="b">Large</nana-radio-button>
</nana-radio-group>Prefix icons
Section titled “Prefix icons”The prefix slot takes a leading icon — a
nana-icon, or anything else.
<nana-radio-group label="View" orientation="horizontal" value="list">
<nana-radio-button value="list">
<nana-icon slot="prefix" name="list"></nana-icon>
List
</nana-radio-button>
<nana-radio-button value="grid">
<nana-icon slot="prefix" name="grid_on"></nana-icon>
Grid
</nana-radio-button>
<nana-radio-button value="board">
<nana-icon slot="prefix" name="view_list"></nana-icon>
Board
</nana-radio-button>
</nana-radio-group>Checked, disabled and invalid
Section titled “Checked, disabled and invalid”Outside a group, drive checked yourself. Inside one, the group sets it from
value — write checked and the group will overwrite it on the next render, so
leave it to the group there.
<nana-radio-button value="a" checked>Selected</nana-radio-button><nana-radio-button value="b" disabled>Unavailable</nana-radio-button>invalid is a styling hook the group sets when its error is non-empty; it
paints the border in the danger colour. Set it directly only outside a group.
Keyboard
Section titled “Keyboard”| Key | Does |
|---|---|
Space Enter | Select this option |
↓ → ↑ ← | Move and select — handled by the group |
Inside a group, the group’s roving tabindex decides which option is tabbable and
the arrows do the moving, so this element only answers the activation keys. The
host delegates focus to its inner <button>, which is what lets that roving
tabindex land on the visible control.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
checked | checked | boolean | false | Selected state (normally driven by nana-radio-group) |
disabled | disabled | boolean | false | Disable the control |
invalid | invalid | boolean | false | Invalid styling (set by the group when its validation fails) |
size | size | RadioSize | 'md' | Control size |
value | value | string | '' | Submitted / emitted value for this option |
Events
| Event | Description |
|---|---|
nana-change | Fired on selection (detail.value) |
Slots
| Slot | Description |
|---|---|
(default) | The label |
prefix | Leading icon |
CSS parts
| Part | Description |
|---|---|
::part(button) | The interactive button |
CSS custom properties
| Property | Description |
|---|---|
--nana-radio-button-accent | Selected fill / border colour |
--nana-radio-button-on-accent | Text colour when selected |
--nana-radio-button-border | Unselected border colour |
--nana-radio-button-bg | Unselected background |
--nana-radio-button-radius | Corner radius of the segmented button |
Accessibility
Section titled “Accessibility”- The host carries
role="radio"with a livearia-checked, andaria-disabledwhen disabled. - The visible control is a real
<button type="button">, so it is reachable and activatable without the host’s role doing the work.