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.
Card
Cash
Show code Copy < nana-radio-group value = "card" label = "Payment" > < nana-radio value = "card" >Card</ nana-radio > < nana-radio value = "cash" >Cash</ nana-radio > </ nana-radio-group >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/radio " ;
< nana-radio-group value = " card " label = " Payment " >
< nana-radio value = " card " > Card </ nana-radio >
< nana-radio value = " cash " > Cash </ nana-radio >
Each nana-radio takes a label and optional description.
Show code Copy < nana-radio-group label = "Notifications" name = "notify" value = "email" help-text = "Choose how we reach you." > < nana-radio value = "email" label = "Email" description = "Updates to your inbox" ></ nana-radio > < nana-radio value = "sms" label = "SMS" description = "Texts to your phone" ></ nana-radio > < nana-radio value = "push" label = "Push" description = "In-app notifications" ></ nana-radio > </ nana-radio-group >
Set orientation="horizontal" on the group.
Show code Copy < nana-radio-group label = "Billing period" name = "billing" value = "monthly" orientation = "horizontal" > < nana-radio value = "monthly" label = "Monthly" ></ nana-radio > < nana-radio value = "yearly" label = "Yearly" ></ nana-radio > < nana-radio value = "lifetime" label = "Lifetime" ></ nana-radio > </ nana-radio-group >
Properties Property Attribute Type Default Description checked— booleanfalseSelected state (normally driven by nana-radio-group) description— string | undefined—Secondary descriptive text disabled— booleanfalseDisable the control invalid— booleanfalseInvalid styling (set by the group when its validation fails) label— string | undefined—Convenience label text (slot wins if both are present) size— RadioSize'md'Control size value— string''Submitted / emitted value for this option
Events Event Description nana-changeFired on selection (`detail.value`)
Slots Slot Description (default)The label (overrides the `label` attribute) descriptionSecondary descriptive text
CSS parts Part Description ::part(control)The clickable row ::part(circle)The radio circle ::part(label)The label text
CSS custom properties Property Description --nana-radio-accentSelected fill / border colour --nana-radio-dot-colorInner dot colour --nana-radio-borderUnselected border colour --nana-radio-bgCircle background --nana-radio-sizeCircle diameter (overrides size preset)
Event Type Description nana-changeCustomEventFired on selection (detail.value)
Slot Description (default)The label (overrides the label attribute) descriptionSecondary descriptive text
Variable Default Description --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)
Part Description controlThe clickable row circleThe radio circle labelThe label text
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Radio interactively Every state, prop, and edge case — with live controls — in Storybook.
