Packages
mishka_chelekom
0.0.9
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
usage-rules/headless/radio.md
# radio (headless)
Single, unstyled radio control (label + native input + indicator). Use inside a `radio_group` or a native `<fieldset>`. Follows WAI-ARIA Radio pattern via native radio semantics (no JS).
## Generate
`mix mishka.ui.gen.headless radio` → `lib/<app>_web/components/headless/radio.ex`.
## Anatomy
`<label>` wrapping:
- `input` — `data-part="input"`, native `type="radio"`
- `indicator` — `data-part="indicator"`, `aria-hidden`
- `label` — `data-part="label"`
## ARIA & keyboard / state
Native radio behavior — arrow keys move within a `name` group; only one selected. `data-disabled` set on the label when disabled; style native `:checked` (or a `data-checked` you toggle) on the input.
## Example
```heex
<.radio :for={{label, v} <- [{"Email","email"}, {"SMS","sms"}]}
id={"notify-#{v}"} name="notify" value={v} checked={v == "email"}>
{label}
</.radio>
```
Attrs: `id` (req), `name`, `value`, `checked`, `disabled`, `class`, `rest`. Slot: `inner_block` (the label).
## Styling
Ships no colors. Hide the native input and style `chelekom-radio__indicator` off `:checked`, e.g. `.chelekom-radio__input:checked + .chelekom-radio__indicator{ … }`.