Radio
Custom-dot radio button, grouped by a shared name.
Preview
Daily / Weekly
<label class="nx-radio"><input type="radio" name="r1" checked><span class="nx-radio__box"></span>Daily</label><label class="nx-radio"><input type="radio" name="r1"><span class="nx-radio__box"></span>Weekly</label><NxRadio name="r1" label="Daily" defaultChecked />
<NxRadio name="r1" label="Weekly" />API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | ReactNode | undefined | Rendered after the dot, inside the <label>. |
Classes
| Class | Description |
|---|---|
.nx-radio | Label wrapper |
.nx-radio__box | 18×18 custom circle |
States
disabled
Accessibility
- Group related radios with the same name attribute so native grouping works; give the group an accessible name via <fieldset><legend> or aria-labelledby.
Do / Don’t
- Do: Always share one name across a mutually-exclusive group.Don’t: Don't mix radios from two different questions under one name.