Skip to content
Nana UI

Radio

A single radio control — a circle + label. Selection is mutually exclusive and owned by the parent nana-radio-group, which manages the checked value, keyboard roving and form association; on its own a radio still renders and fires nana-change. Rebrand by overriding --nana-radio-accent (or the global --nana-surface-accent) — no need to fork the component.

Preview

Section titled “Preview”
Card Cash

Installation

Section titled “Installation”
Terminal window
npm install @nana-tec/ui-components

Import

Section titled “Import”
import "@nana-tec/ui-components/radio";

Basic usage

Section titled “Basic usage”
<nana-radio-group value="card" label="Payment">
  <nana-radio value="card">Card</nana-radio>
  <nana-radio value="cash">Cash</nana-radio>
</nana-radio-group>

With descriptions

Section titled “With descriptions”

Each nana-radio takes a label and optional description.

Horizontal

Section titled “Horizontal”

Set orientation="horizontal" on the group.

API

Section titled “API”
PropertyTypeDefaultDescription
valuestring''Submitted / emitted value for this option
checkedbooleanfalseSelected state (normally driven by nana-radio-group)
disabledbooleanfalseDisable the control
invalidbooleanfalseInvalid styling (set by the group when its validation fails)
labelstring | undefined—Convenience label text (slot wins if both are present)
descriptionstring | undefined—Secondary descriptive text
size'sm' | 'md' | 'lg''md'Control size

Events

Section titled “Events”
EventTypeDescription
nana-changeCustomEventFired on selection (detail.value)

Slots

Section titled “Slots”
SlotDescription
(default)The label (overrides the label attribute)
descriptionSecondary descriptive text

CSS Variables

Section titled “CSS Variables”
VariableDefaultDescription
--nana-radio-accent—Selected fill / border colour
--nana-radio-dot-color—Inner dot colour
--nana-radio-border—Unselected border colour
--nana-radio-bg—Circle background
--nana-radio-size—Circle diameter (overrides size preset)

CSS Parts

Section titled “CSS Parts”
PartDescription
controlThe clickable row
circleThe radio circle
labelThe label text

Accessibility

Section titled “Accessibility”
  • Keyboard accessible
  • Screen-reader labels
  • Focus-visible states
  • ARIA roles and states
  • WCAG 2.2 AA contrast
Section titled “Related components”

Storybook

Section titled “Storybook”
Explore Radio interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook