Packages
mishka_chelekom
0.0.9-beta.2
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)
A single, unstyled radio control (label + native input + indicator). For use inside a
`radio_group` or a native `<fieldset>`. WAI-ARIA Radio pattern; relies on native radio
semantics (no JS).
## Generate
`mix mishka.ui.gen.headless radio` → `lib/<app>_web/components/headless/radio.ex`.
## Anatomy
A `<label>` wrapping: `input` (`data-part="input"`, native `type="radio"`), `indicator`
(`data-part="indicator"`, `aria-hidden`), and `label` (`data-part="label"`).
## ARIA & keyboard
Native radio behavior — arrow keys move within a `name` group; only one selected.
## State
`data-disabled` on the label when disabled; style the native `:checked` state (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 the `chelekom-radio__indicator` off
`:checked` (e.g. `.chelekom-radio__input:checked + .chelekom-radio__indicator{ … }`).