Radio

Arrow keys move between options and select as they go — one Tab stop for the whole group, per the WAI-ARIA radio pattern.

Eleven looks built entirely from `className`, `containerClassName` and the `--rd-solid` variable — neon, a diamond, a gradient ring, glass, and more, with no fork of the component underneath any of them.

Three sizes on the same control scale the rest of the library uses.

The six semantic tones, each repointing the same `--rd-solid` variable the ring and dot are built from.

A disabled radio is still a real input — `:disabled` drives the dimmed ring and the cursor together, not just the colour.

A label and a line of helper text per option, wired to the control through `Field.Description` rather than a hand-written `aria-describedby`.

The radio drives the whole card through `:has(:checked)` — no click handler on the card itself, and only one can ever be selected.

`orientation` swaps `aria-orientation` and the flex direction together, so arrow-key navigation always matches the layout it drives.

Compact, `sm`-sized radios sharing one horizontal group, for a size picker rather than a form.

Field only marks the group invalid after a first submit attempt, and `Field.Error` mounts nothing until then — an always-present error paragraph gets announced as empty by some screen readers before the user has done anything wrong.

`value` and `onValueChange` are the entire contract — the buttons below prove it by driving the group from outside, with no internal state of their own to fight.

A sidebar-style picker — one option checked at a time, a hidden radio behind each row, and a left accent bar driven by `has-[:checked]` rather than a click handler.

The dot itself is still a real `Radio` — only `className` and `dotClassName` change — highlighted inside a row whose border reacts to the same `:checked` state.

The same hidden-radio pattern in two layouts — a grid of square tiles and a list of pills — both driven by `has-[:checked]` on the label, no click handler on the tile.

Five sliding-glider segmented controls — pill tabs, dark blocks, glass tiers, a vertical edge-light, and a glass dial — each a real `RadioGroup` with the glider position computed from the selected index.

A 3D flip card next to each option, rotated by `group-has-[:checked]` rather than a click handler on the badge itself.

Six radios arranged around a dial, each positioned with `rotate → translate → counter-rotate`; the pointer angle is computed from the selected index rather than hand-tuned per option.

A vertical picker where the unselected rows fade, shrink and blur by their distance from the selected one — the distance is computed in React, not chained per-option CSS.