# Radio

> Source: https://design.nanatec.co.ke/components/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.

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

```html
<nana-radio-group value="card" label="Payment">
  <nana-radio value="card">Card</nana-radio>
  <nana-radio value="cash">Cash</nana-radio>
</nana-radio-group>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/radio";
```

## Basic usage

```html
<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

Each `nana-radio` takes a `label` and optional `description`.

```html
<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>
```

## Horizontal

Set `orientation="horizontal"` on the group.

```html
<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>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-change` | `CustomEvent` | Fired on selection (`detail.value`) |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The label (overrides the `label` attribute) |
| `description` | Secondary descriptive text |

## CSS Variables

| 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) |

## CSS Parts

| Part | Description |
|---|---|
| `control` | The clickable row |
| `circle` | The radio circle |
| `label` | The label text |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/button/">Button</a></li>
  <li><a href="/components/button-group/">Button Group</a></li>
  <li><a href="/components/icon-button/">Icon Button</a></li>
  <li><a href="/components/input/">Input</a></li>
  <li><a href="/components/textarea/">Textarea</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-radio--docs