Один-з-N вибір (native <input type=radio>, ←/→/↑/↓ keyboard). Експлорер: палітра → hue → stop, далі всі розміри / стани / групи в обраному кольорі. Filled-радіо тримає той самий gradient-recipe, що й solid-Badge (S → S+3), синхронно з Switch і Checkbox.

import { Radio, RadioGroup } from "@residence/glass-ui"

Палітра + Відтінок

3 кроки: палітра (16 + 20 + 18) → hue → stop. Нижче — все, що тільки вміє Radio, рендериться в обраному кольорі.

01 · Палітра

02 · Hue · Смарагд

03 · Stop · 500

Прев'ю · emerald-500

Розмір/стан/групи рендеряться в обраному hue × stop. Окремий ряд знизу — той самий hue у всіх 11 стопах як одна radio-group, тож можна по кліку обрати найкращий stop для дизайн-токена.

Sizessm / md / lg — клікни щоб обрати

Stateschecked / unchecked / disabled-on / disabled-off

checked

unchecked

disabled · on

disabled · off

Group · verticalзвичайний колонковий радіо-список з підписами

Денний звітМісяцьКварталРік

value = month

Group · horizontalrow-layout, той самий API

СіткаСписокКанбан

value = grid

All stops · emeraldтой самий hue у 11 стопах як одна radio-group — клік підбирає stop у picker'і

100

200

300

400

500

600

700

800

900

950

Recipefilled radio — gradient = Badge solid · default shade

filled-bg: linear-gradient(180deg,
  #0F8945 0%,
  #053D1F 100%)
border:    transparent (filled) · slate-300/90 (empty)
dot:       #ffffff (round, центрований)
empty-bg:  sunken slate socket (hue-agnostic — як у Switch off)

contrast-of-dot on filled-bg
  top lum=0.184   bot lum=0.035   avg=0.109   threshold=0.5
text-ink-on-fill: #ffffff  (інформативно — Radio dot завжди білий)

ПопереднійCheckbox Наступний Switch