prime-ui-kit 0.9.0 → 0.9.2

package/src/components/radio/COMPONENT.md

@@ -1,12 +1,13 @@
 # Radio
 
 **Category:** selection
+**Kind:** control
 
 > Radio buttons for choosing exactly one option out of a small visible set.
 
 ## When to use
 - One choice out of 2–7 visible options where the user benefits from seeing all of them at once: plan, payment method, delivery slot.
-- Options that need a description under the label (`Radio.Hint`) or a reason why one is unavailable.
+- Options that need a description under the text (`hint` on `Radio.Root`) or a reason why one is unavailable.
 - A required one-of-many question in a form.
 
 ## When not to use
@@ -22,76 +23,58 @@ import { Radio } from "prime-ui-kit";
 
 ## Anatomy
 ```
-Radio.Group             role="radiogroup"; value, name, size and shared flags
-└─ Radio.Root           one option (value); ref and input props go to the hidden native input
-   ├─ Radio.Label       clickable row: renders the native input, the circle and the text
-   ├─ Radio.Hint        description under the text column (optional)
-   └─ Radio.Error       error message under the text column (optional, makes the option invalid)
+Radio.Group             field: group label → role="radiogroup" → hint | error; value, name, size, flags
+└─ Radio.Root           one option (value): the <label> row with the input and the circle, its hint
+   └─ Radio.Label       the visible text of the option
 ```
-`Radio.Root` must be inside `Radio.Group`; the native `input type="radio"` is rendered by `Radio.Label`.
+`Radio.Root` must be inside `Radio.Group`.
 
 ## API
 
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 ### Radio.Group
+`ref` → `HTMLDivElement` (the field frame). Owns the value, the shared `name` and size; renders the group label above and the hint / error below the options. Field-root rule: `className`, `ref` and the rest go to the frame; `id`, `aria-label`, `aria-labelledby` and `aria-describedby` to the `role="radiogroup"` element.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` | `string` | — | Controlled selected value; use with `onValueChange`. |
-| `defaultValue` | `string` | — | Initial value in uncontrolled mode; nothing selected when omitted. |
-| `onValueChange` | `(value: string) => void` | — | Called with the chosen option's `value` (click, Space, arrows). |
-| `name` | `string` | auto (`useId`) | Native `name` shared by all radios. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Size tier for every option. |
-| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Stack the options or lay them out in a wrapping row. |
-| `invalid` | `boolean` | `false` | Invalid state for every option (`aria-invalid` on the group and inputs). |
-| `required` | `boolean` | `false` | Native `required` on the radios and `aria-required` on the group. |
+| `value` | `string` | — | Controlled value (the `value` of the chosen `Radio.Root`). |
+| `defaultValue` | `string` | — | Initial value when uncontrolled. |
+| `onValueChange` | `(value: string) => void` | — | Called with the value of the newly chosen option. |
+| `name` | `string` | — | Native `name` shared by the radios; generated when omitted. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of every circle, text, the label and the hint. Without it the group takes the tier of its host (LoginForm, Popover, a panel with a size), else `m`. |
+| `label` | `ReactNode` | — | Group heading above the options; names the radiogroup through `aria-labelledby`. Without it, pass `aria-label`. |
+| `required` | `boolean` | `false` | Red `*` after the label, native `required` on the radios and `aria-required` on the group. |
+| `optional` | `boolean` | `false` | Muted marker right after the label text (`labels.optional`). |
+| `hint` | `ReactNode` | — | Help text under the options. Hidden while `error` is shown. |
+| `error` | `ReactNode` | — | Error message under the options; implies `invalid`. |
+| `invalid` | `boolean` | `false` | Danger ring on the unchecked circles and `aria-invalid` on the group and the inputs. A non-empty `error` implies it. |
 | `disabled` | `boolean` | `false` | Disables every option. |
-| `fullWidth` | `boolean` | `false` | Stretch every option to the container width. |
-| `className` | `string` | — | Class on the group `div`. |
-
-+ native `<div>` props except `defaultValue`, `onChange`, `dir` (use `aria-label` / `aria-labelledby` to name the group).
-Ref: `forwardRef` → `HTMLDivElement`.
+| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | `vertical` stacks the options; `horizontal` lays them out in a wrapping row. Sets `aria-orientation`. |
+| `labels` | `Partial<RadioGroupLabels>` | — | Built-in strings, see Labels. |
+| `id` | `string` | — | Id of the `role="radiogroup"` element (generated when omitted); also the default `name`. |
+| `aria-label / aria-labelledby / aria-describedby` | `string` | — | Name and description of the radiogroup (`aria-describedby` is merged before the hint / error ids). |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "id" \| "children" \| "defaultValue" \| "defaultChecked" \| "onChange" \| "dir">` | — | `className`, `data-*` and the other attributes of the field frame `<div>`. |
 
 ### Radio.Root
+`ref` → `HTMLInputElement` (the native radio). One option inside `Radio.Group`: the `<label>` row with the input and the circle, and its hint; native input props go to the input.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `value` | `string` | — (required) | Value reported to the group when this option is chosen. |
-| `invalid` | `boolean` | `false` | Invalid state for this option only; also set by the group or a mounted `Radio.Error`. |
-| `disabled` | `boolean` | `false` | Disables this option (the group's `disabled` wins). |
-| `id` | `string` | auto (`useId`) | Id of the native input; hint/error ids derive from it. |
-| `aria-describedby` | `string` | — | Extra description ids; merged with the mounted hint and error ids. |
-| `className` | `string` | — | Class on the option wrapper `div`. |
-| `children` | `ReactNode` | — | `Radio.Label`, `Radio.Hint`, `Radio.Error`. |
-
-+ native `<input>` props except `type`, `size`, `checked`, `defaultChecked`, `onChange`, `name`, `value`, `children` — applied to the hidden native input. `required` on `Radio.Root` is ignored (overridden by the group): set `required` on `Radio.Group`.
-Ref: `forwardRef` → `HTMLInputElement`. No `asChild`.
+| `hint` | `ReactNode` | — | Description under the option text, linked through `aria-describedby`. |
+| `disabled` | `boolean` | `false` | Disables this option only. |
+| `children` | `ReactNode` | — | `Radio.Label`. Without it only the circle renders — give the root an `aria-label`. |
+| `className` | `string` | — | Class on the option `<div>`. |
+| `…rest` | `Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "size" \| "checked" \| "defaultChecked" \| "onChange" \| "name" \| "value">` | — | `id`, `aria-label`, `aria-describedby`, `onBlur`… on the native input. |
 
 ### Radio.Label
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Label text. |
-| `className` | `string` | — | Class on the `<label>` row. |
-
-+ native `<label>` HTML attributes except `htmlFor` and `size`. Ref: `forwardRef` → `HTMLLabelElement`.
-
-### Radio.Hint
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — (required) | Description text under the label; added to `aria-describedby`. |
-| `className` | `string` | — | Class on the `<p>`. |
-
-+ native `<p>` props except `id`. No ref.
-
-### Radio.Error
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — (required) | Error text in `danger-text`; while mounted the option is invalid. |
-| `className` | `string` | — | Class on the `<p>`. |
-
-+ native `<p>` props except `id`. No ref.
+`ref` → `HTMLSpanElement`. The visible text in the text column of the option row. Native `<span>` props.
 
 ## Variants
-No `variant`/`tone`/`color`. Axes on `Radio.Group`: `size`, `orientation`, `fullWidth`.
+No `variant` / `tone` / `color`.
 
-### size
+### size (Radio.Group)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `xs` | 14px circle, 4px gap, 12/16 text | dense filters and tables | |
@@ -100,87 +83,83 @@ No `variant`/`tone`/`color`. Axes on `Radio.Group`: `size`, `orientation`, `full
 | `l` | 20px circle, 8px gap, 16/24 text | spacious forms, onboarding | |
 | `xl` | 24px circle, 12px gap, 16/24 text | touch-first screens | |
 
-### orientation
+**Sizes:** match the form — `m` radios next to `m` inputs and buttons. The circle is centred on the first text line; the group label and hint take the same tier.
+
+### orientation (Radio.Group)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `vertical` | options stacked, gap `--prime-space-2` | options with descriptions, more than 3 options | yes |
 | `horizontal` | options in a wrapping row, column gap `--prime-space-5`, row gap `--prime-space-2` | 2–4 short labels without hints | |
 
-### fullWidth
+### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `false` | each option is as wide as its content | most cases | yes |
-| `true` | each option stretches to the container width | options laid out in a grid or a card list | |
+| `required` | red `*` after the group label | the question must be answered | `false` |
+| `optional` | muted «необязательно» after the group label | most questions are required | `false` |
+| `invalid` | danger ring on the unselected circles | the message is shown elsewhere; otherwise pass `error` | `false` |
+| `disabled` | muted circles and text | the whole question or one option is unavailable | `false` |
 
 **Combinations**
-- `orientation="horizontal"` with `Radio.Hint` on options → avoid: descriptions break the row; use vertical.
-- `invalid` on the group plus one `Radio.Error` under the last option — show a group error once.
-- `fullWidth` with `horizontal` is pointless: every option takes the full row.
-
-**Sizes** — match the form: `m` radios next to `m` inputs and buttons. The circle is centred on the first text line.
-
-**Hierarchy** — one group per question; name it with a visible heading (`Typography.Root` with an `id`) + `aria-labelledby` on `Radio.Group`, or with `aria-label`.
+- `orientation="horizontal"` with option hints → avoid: descriptions break the row; use vertical.
+- One error per question: `error` on `Radio.Group`, never per option.
+- `required` and `optional` together are pointless.
 
 ## States
-| State | Driven by | DOM | Looks like |
-|---|---|---|---|
-| unselected | group `value` ≠ option `value` | `data-state="unchecked"` on option | circle `fill-strong`, hover `fill-strong-hover` |
-| selected | group `value` = option `value` | `data-state="checked"` | circle `accent-default` (hover `accent-hover`) with a thumb-coloured dot (40%) that pops in |
-| invalid | group `invalid`, option `invalid`, or mounted `Radio.Error` | `data-invalid="true"`, `aria-invalid` | unselected circle gets a `danger-border` inset ring; focus ring `danger-border` |
-| disabled | group or option `disabled` | `data-disabled="true"`, `aria-disabled` on group | circle `fill-muted`, dot `text-disabled`, `cursor: not-allowed` |
-| active | pointer press | — | circle scales to 92% |
-| focus-visible | keyboard | — | outer focus ring around the circle |
+| State | Driven by | DOM |
+|---|---|---|
+| unselected | group `value` ≠ option `value` | `data-state="unchecked"` on the option; circle `fill-strong`, hover `fill-strong-hover` |
+| selected | group `value` = option `value` | `data-state="checked"`; accent circle with a thumb-coloured dot that grows in |
+| invalid | `invalid` or a non-empty `error` on the group | `data-invalid="true"`, `aria-invalid` on the group and the inputs; danger ring on unselected circles |
+| disabled | group or option `disabled` | `data-disabled="true"`, native `disabled` on every radio; `fill-muted` circle, `cursor: not-allowed` |
+| pressed | pointer press | the circle scales to the compact press scale |
+| focus-visible | keyboard | outer focus ring around the circle |
 
-Group carries `data-size`, `data-orientation`, `data-invalid`, `data-disabled`, `aria-orientation`, `aria-required`. Option carries `data-size`, `data-state`, `data-invalid`, `data-disabled`, `data-full-width`.
-Controlled: `value` + `onValueChange`. Uncontrolled: `defaultValue`.
+The radiogroup carries `data-size`, `data-orientation`, `aria-orientation`, `aria-required`; options carry `data-size`, `data-state`, `data-invalid`, `data-disabled`. Controlled: `value` + `onValueChange`. Uncontrolled: `defaultValue`.
 
 ## Layout & spacing
-- Options inside a group: gap `--prime-space-2` (vertical) — set your own gap via `className` when options have hints (e.g. `--prime-space-4`).
-- Group heading → first option: `--prime-space-2` (gap on the parent, no margins); group → group: `--prime-space-8`.
-- In a Card: content in `Card.Body`, buttons in `Card.Actions` as a direct child of `Card.Root` after the body, primary action last.
-- Hint and error align with the text column, not with the circle.
-- Long labels wrap; works from 320px (horizontal rows wrap).
+- Group label → options: the tier `label-gap`; options → hint / error: the tier `hint-gap` (the same rhythm as fields).
+- Options inside a group: gap `--prime-space-2`; group → group: `--prime-space-8`.
+- An option hint aligns with the text column, not with the circle.
+- Long labels wrap; horizontal rows wrap at narrow widths.
 
 ## Accessibility
-- Group: `role="radiogroup"`, `aria-orientation`, `aria-invalid`, `aria-required`, `aria-disabled`. Name it with `aria-labelledby` (pointing at a visible heading) or `aria-label`.
-- Options are native `<input type="radio">` sharing one `name`: Tab enters the group, arrow keys move the selection, Space selects.
-- Each input gets `aria-describedby` = your ids + hint id + error id.
-- No `labels` keys.
 
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [sizes.tsx](examples/sizes.tsx) | All size tiers | Choosing the tier next to other controls |
-| [states.tsx](examples/states.tsx) | Unselected, selected, invalid, disabled | Reference for every state |
-| [hint-error.tsx](examples/hint-error.tsx) | Required invalid group with hints and one error, named by a heading via `aria-labelledby` | Validating a one-of-many form question |
-| [horizontal.tsx](examples/horizontal.tsx) | `orientation="horizontal"` with a heading via `aria-labelledby` | 2–4 short options in a row |
-| [plan-picker.tsx](examples/plan-picker.tsx) | Controlled group in a Card with descriptions, a disabled option, summary text and `Card.Actions` (primary last) | A choice with consequences in a settings form |
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Focuses the selected option (or the first one when nothing is selected). |
+| `ArrowDown` · `ArrowRight` · `ArrowUp` · `ArrowLeft` | Selects the next or previous option of the group (native radio behaviour). |
+| `Space` | Selects the focused option. |
 
-```tsx
-import { Radio } from "prime-ui-kit";
+### ARIA
+- `Radio.Group` is `role="radiogroup"`, named by its `label` through `aria-labelledby`, or by `aria-label`.
+- `aria-required`, `aria-invalid` and `aria-orientation` sit on the group; the group hint or error is in its `aria-describedby`.
+- Every option is a native `<input type="radio">` with the shared `name`; an option `hint` is linked through `aria-describedby`.
 
-export function PeriodRadio() {
-  return (
-    <Radio.Group name="period" defaultValue="week" aria-label="Период отчёта">
-      <Radio.Root value="week">
-        <Radio.Label>Неделя</Radio.Label>
-      </Radio.Root>
-      <Radio.Root value="month">
-        <Radio.Label>Месяц</Radio.Label>
-      </Radio.Root>
-    </Radio.Group>
-  );
-}
-```
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Default | Used for |
+|---|---|---|
+| `optional` | `"необязательно"` | Marker after the group label when `optional`. |
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A labelled group of options with one chosen by default — `label`, `defaultValue`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size; the circle and the text follow the group tier — `size`. |
+| [states.tsx](examples/states.tsx) | Every state, each in its own group and labelled by its prop — `value`, `invalid`, `disabled`. |
+| [group.tsx](examples/group.tsx) | A required group with option descriptions and the group's error under the options — `label`, `required`, `hint`, `error`. |
+| [orientation.tsx](examples/orientation.tsx) | Options stacked in a column and laid out in a wrapping row — `orientation`. |
+| [controlled.tsx](examples/controlled.tsx) | The parent owns the chosen plan and shows it in the hint — `value`, `onValueChange`. |
 
 ## Mistakes
-- `Radio.Root` outside `Radio.Group` → always wrap options in `Radio.Group` (it throws without the context).
-- `checked` / `onChange` on `Radio.Root` → put `value` / `onValueChange` on `Radio.Group`.
-- `size` or `required` on `Radio.Root` → set them on `Radio.Group`.
-- An error under every option → mark the group `invalid` and render one `Radio.Error`.
-- Unnamed group → add `aria-labelledby` (visible heading) or `aria-label`.
-- Raw `<p>` / `<legend>` with custom font CSS for the heading → use `Typography.Root` (e.g. `body-s`, `weight="medium"`, `tone="secondary"`).
-- `Card.Actions` inside `Card.Body`, primary button first → put `Card.Actions` after `Card.Body`, primary last.
+- `Radio.Root` outside `Radio.Group` → it throws; every option needs the group.
+- A heading made of `Typography` + `aria-labelledby` → pass `label` to `Radio.Group`.
+- An error under one option → pass `error` to `Radio.Group`.
+- Radios for an instant view switch → use `SegmentedControl`.
+- Eight or more options → use `Select`.
 
 ## Related
-[Checkbox](../checkbox/COMPONENT.md) · [Switch](../switch/COMPONENT.md) · [SegmentedControl](../segmented-control/COMPONENT.md) · [Select](../select/COMPONENT.md)
+- **Built from:** [Label](../label/COMPONENT.md) (group label, option rows), [Hint](../hint/COMPONENT.md) (`hint`, `error`)
+- **See also:** [Checkbox](../checkbox/COMPONENT.md), [Switch](../switch/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), [Select](../select/COMPONENT.md)

package/src/components/radio/examples/controlled.tsx

@@ -0,0 +1,30 @@
+/** The parent owns the chosen plan and shows it in the hint — `value`, `onValueChange`. */
+import { Radio } from "prime-ui-kit";
+import * as React from "react";
+
+const PLANS = [
+  { value: "start", label: "Старт", hint: "До 5 участников, базовые отчёты" },
+  { value: "team", label: "Команда", hint: "Общие проекты, SSO и журнал действий" },
+  { value: "business", label: "Бизнес", hint: "Выделенная поддержка и хранение данных в РФ" },
+];
+
+export default function RadioControlledExample() {
+  const [plan, setPlan] = React.useState("team");
+  const current = PLANS.find((item) => item.value === plan);
+
+  return (
+    <Radio.Group
+      label="Тариф рабочего пространства"
+      name="plan"
+      value={plan}
+      onValueChange={setPlan}
+      hint={`Будет подключён тариф «${current?.label}»`}
+    >
+      {PLANS.map((item) => (
+        <Radio.Root key={item.value} value={item.value} hint={item.hint}>
+          <Radio.Label>{item.label}</Radio.Label>
+        </Radio.Root>
+      ))}
+    </Radio.Group>
+  );
+}

package/src/components/radio/examples/group.tsx

@@ -0,0 +1,23 @@
+/** A required group with option descriptions and the group's error under the options — `label`, `required`, `hint`, `error`. */
+import { Radio } from "prime-ui-kit";
+
+export default function RadioGroupExample() {
+  return (
+    <Radio.Group
+      label="Способ оплаты"
+      name="payment"
+      required
+      error="Выберите способ оплаты, чтобы оформить заказ"
+    >
+      <Radio.Root value="card" hint="Списание сразу после подтверждения заказа">
+        <Radio.Label>Банковская карта</Radio.Label>
+      </Radio.Root>
+      <Radio.Root value="invoice" hint="Реквизиты придут на почту в течение рабочего дня">
+        <Radio.Label>Счёт для юрлица</Radio.Label>
+      </Radio.Root>
+      <Radio.Root value="sbp" disabled hint="Подключается в настройках магазина">
+        <Radio.Label>СБП</Radio.Label>
+      </Radio.Root>
+    </Radio.Group>
+  );
+}

package/src/components/radio/examples/orientation.tsx

@@ -0,0 +1,34 @@
+/** Options stacked in a column and laid out in a wrapping row — `orientation`. */
+import { Radio } from "prime-ui-kit";
+
+const PERIODS = [
+  { value: "week", label: "Неделя" },
+  { value: "month", label: "Месяц" },
+  { value: "quarter", label: "Квартал" },
+];
+
+export default function RadioOrientationExample() {
+  return (
+    <>
+      <Radio.Group label="vertical" name="period-vertical" defaultValue="month">
+        {PERIODS.map((period) => (
+          <Radio.Root key={period.value} value={period.value}>
+            <Radio.Label>{period.label}</Radio.Label>
+          </Radio.Root>
+        ))}
+      </Radio.Group>
+      <Radio.Group
+        label="horizontal"
+        name="period-horizontal"
+        defaultValue="month"
+        orientation="horizontal"
+      >
+        {PERIODS.map((period) => (
+          <Radio.Root key={period.value} value={period.value}>
+            <Radio.Label>{period.label}</Radio.Label>
+          </Radio.Root>
+        ))}
+      </Radio.Group>
+    </>
+  );
+}

package/src/components/radio/examples/overview.tsx

@@ -0,0 +1,18 @@
+/** A labelled group of options with one chosen by default — `label`, `defaultValue`. */
+import { Radio } from "prime-ui-kit";
+
+export default function RadioOverviewExample() {
+  return (
+    <Radio.Group label="Доставка" name="delivery" defaultValue="courier">
+      <Radio.Root value="courier">
+        <Radio.Label>Курьером</Radio.Label>
+      </Radio.Root>
+      <Radio.Root value="pickup">
+        <Radio.Label>Самовывоз из пункта выдачи</Radio.Label>
+      </Radio.Root>
+      <Radio.Root value="post">
+        <Radio.Label>Почтой России</Radio.Label>
+      </Radio.Root>
+    </Radio.Group>
+  );
+}

package/src/components/radio/examples/sizes.tsx

@@ -1,23 +1,18 @@
-/** All five size tiers of a selected radio side by side. Use it to pick the tier that matches the neighbouring controls. */
-import { Radio, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** Every size; the circle and the text follow the group tier — `size`. */
+import { Radio } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function RadioSizesExample() {
   return (
-    <div className={styles.row}>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.cell}>
-          <Radio.Group size={size} defaultValue="on" aria-label={`Размер ${size}`}>
-            <Radio.Root value="on">
-              <Radio.Label>Подпись</Radio.Label>
+        <div key={size}>
+          <Radio.Group size={size} defaultValue={size} aria-label={`Размер ${size}`}>
+            <Radio.Root value={size}>
+              <Radio.Label>{size}</Radio.Label>
             </Radio.Root>
           </Radio.Group>
-          <Typography.Root as="span" variant="caption" tone="muted">
-            {size}
-          </Typography.Root>
         </div>
       ))}
     </div>

package/src/components/radio/examples/states.tsx

@@ -1,36 +1,48 @@
-/** Unselected, selected, invalid and disabled radios, each in its own group so the selected ones do not compete. Use it as a reference for every visual state. */
+/** Every state, each in its own group and labelled by its prop — `value`, `invalid`, `disabled`. */
 import { Radio } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 export default function RadioStatesExample() {
   return (
-    <div className={styles.stack}>
-      <Radio.Group aria-label="Не выбран">
-        <Radio.Root value="off">
-          <Radio.Label>Не выбран</Radio.Label>
-        </Radio.Root>
-      </Radio.Group>
-      <Radio.Group defaultValue="on" aria-label="Выбран">
-        <Radio.Root value="on">
-          <Radio.Label>Выбран</Radio.Label>
-        </Radio.Root>
-      </Radio.Group>
-      <Radio.Group invalid aria-label="Ошибка">
-        <Radio.Root value="error">
-          <Radio.Label>Ошибка</Radio.Label>
-        </Radio.Root>
-      </Radio.Group>
-      <Radio.Group disabled aria-label="Недоступен">
-        <Radio.Root value="disabled">
-          <Radio.Label>Недоступен</Radio.Label>
-        </Radio.Root>
-      </Radio.Group>
-      <Radio.Group disabled defaultValue="disabled-on" aria-label="Недоступен, выбран">
-        <Radio.Root value="disabled-on">
-          <Radio.Label>Недоступен, выбран</Radio.Label>
-        </Radio.Root>
-      </Radio.Group>
-    </div>
+    <>
+      <div>
+        <div>
+          <Radio.Group aria-label="unchecked">
+            <Radio.Root value="unchecked">
+              <Radio.Label>unchecked</Radio.Label>
+            </Radio.Root>
+          </Radio.Group>
+        </div>
+        <div>
+          <Radio.Group defaultValue="checked" aria-label="checked">
+            <Radio.Root value="checked">
+              <Radio.Label>checked</Radio.Label>
+            </Radio.Root>
+          </Radio.Group>
+        </div>
+        <div>
+          <Radio.Group invalid aria-label="invalid">
+            <Radio.Root value="invalid">
+              <Radio.Label>invalid</Radio.Label>
+            </Radio.Root>
+          </Radio.Group>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Radio.Group disabled aria-label="disabled">
+            <Radio.Root value="disabled">
+              <Radio.Label>disabled</Radio.Label>
+            </Radio.Root>
+          </Radio.Group>
+        </div>
+        <div>
+          <Radio.Group disabled defaultValue="checked" aria-label="disabled · checked">
+            <Radio.Root value="checked">
+              <Radio.Label>disabled · checked</Radio.Label>
+            </Radio.Root>
+          </Radio.Group>
+        </div>
+      </div>
+    </>
   );
 }