Примитивы

RadioGroup

Радиокнопки, которые действительно группа: у них общий name, поэтому браузер сам делает их взаимоисключающими и бесплатно даёт навигацию стрелками — которая одновременно и перемещает, и выбирает. <fieldset role="radiogroup"> с <legend> проговаривает название группы с каждым вариантом.

Код

index.html

<fieldset role="radiogroup" class="aura-fieldset">
  <legend>Density</legend>
  <label class="aura-check">
    <input type="radio" class="aura-radio" name="density" value="comfortable" checked />
    <span>Comfortable</span>
  </label>
  <label class="aura-check">
    <input type="radio" class="aura-radio" name="density" value="compact" />
    <span>Compact</span>
  </label>
  <label class="aura-check">
    <input type="radio" class="aura-radio" name="density" value="auto" disabled />
    <span>Match system</span>
  </label>
</fieldset>

Demo.tsx

import { RadioGroup } from '@ilomee/aura-react';

const OPTIONS = [
  { value: 'comfortable', label: 'Comfortable' },
  { value: 'compact', label: 'Compact' },
  { value: 'auto', label: 'Match system', disabled: true },
];

export default function Demo() {
  // `name` задан здесь явно, чтобы все стеки отрисовали одинаковую разметку: без него каждый
  // фреймворк сгенерировал бы свой id, и кросс-стековому дифу было бы нечего сравнивать.
  return <RadioGroup label="Density" name="density" options={OPTIONS} defaultValue="comfortable" />;
}

Demo.vue

<script setup lang="ts">
import { ref } from 'vue';
import { RadioGroup } from '@ilomee/aura-vue';

const density = ref('comfortable');
</script>

<template>
  <RadioGroup
    v-model="density"
    label="Density"
    :options="[
      { value: 'comfortable', label: 'Comfortable' },
      { value: 'compact', label: 'Compact' },
    ]"
  />
</template>

Demo.svelte

<script lang="ts">
  import { RadioGroup } from '@ilomee/aura-svelte';

  let density = $state('comfortable');
</script>

<RadioGroup
  bind:value={density}
  label="Density"
  options={[
    { value: 'comfortable', label: 'Comfortable' },
    { value: 'compact', label: 'Compact' },
  ]}
/>

Используется как aura-radio-group.

demo.component.ts

import { AuraRadioGroup } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraRadioGroup],
  template: `<aura-radio-group
    label="Density"
    [options]="options"
    [(value)]="density"
  />`,
})
export class DemoComponent {
  density = 'comfortable';
  options = [
    { value: 'comfortable', label: 'Comfortable' },
    { value: 'compact', label: 'Compact' },
  ];
}

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Имя	Тип	По умолчанию	Примечания
label	`string`	—	Рисуется как `<legend>`.
name	`string`	—	Сгенерированный id берётся у самого фреймворка, поэтому он совпадает при SSR и гидратации.
options	`AuraOption[] \| null`	—
value	`string`	—
defaultValue	`string`	`''`
onValueChange	`(value: string) => void`	—
disabled	`boolean`	—

Имя	Тип	По умолчанию	Примечания
label	`string`	—
name	`string`	—	Сгенерированный id берётся у самого фреймворка, поэтому он совпадает при SSR и гидратации.
options	`AuraOption[] \| null`	—
modelValueдвусторонний	`string`	—
defaultValue	`string`	`''`
disabled	`boolean`	`false`
update:modelValueсобытие	`(value: string) => void`	—

Имя	Тип	По умолчанию	Примечания
label	`string`	—
name	`string`	—	Сгенерированный id берётся у самого фреймворка, поэтому он совпадает при SSR и гидратации.
options	`AuraOption[] \| null`	—
valueдвусторонний	`string`	`''`
disabled	`boolean`	`false`
onchange	`(value: string) => void`	—

Имя	Тип	По умолчанию
label	`string`	—
name	`string`	—
options	`AuraOption[] \| null`	`[]`
value	`string`	`''`
disabled	`boolean`	`false`
valueChangeсобытие	`EventEmitter<string>`	—

Какие классы отдаёт

Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.

Класс	Роль	Примечания
.aura-fieldset	база	Обязательный. Без него модификатор не работает.
.aura-radio	база	Обязательный. Без него модификатор не работает.
.aura-check	база	Обязательный. Без него модификатор не работает.

Токены и правила

components.css

точка: var(--radio-size) · 999px
выбран: var(--accent)
рамка: var(--field-border) · var(--r2)
клавиатура: native — arrows move and select