Primitives

RadioGroup

Radios that are actually a group: they share one name, so the browser makes them mutually exclusive and gives arrow-key navigation — which moves *and* selects — for free. A <fieldset role="radiogroup"> with a <legend> announces the group name with every option.

Code

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` is pinned here so every stack renders the same markup — left out, each framework
  // would generate its own id and the cross-stack diff would have nothing to compare.
  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' },
  ]}
/>

Used as 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' },
  ];
}

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
label	`string`	—	Rendered as the `<legend>`.
name	`string`	—	The generated id comes from the framework itself, so it is stable across SSR and hydration.
options	`AuraOption[] \| null`	—
value	`string`	—
defaultValue	`string`	`''`
onValueChange	`(value: string) => void`	—
disabled	`boolean`	—

Name	Type	Default	Notes
label	`string`	—
name	`string`	—	The generated id comes from the framework itself, so it is stable across SSR and hydration.
options	`AuraOption[] \| null`	—
modelValuetwo-way	`string`	—
defaultValue	`string`	`''`
disabled	`boolean`	`false`
update:modelValueevent	`(value: string) => void`	—

Name	Type	Default	Notes
label	`string`	—
name	`string`	—	The generated id comes from the framework itself, so it is stable across SSR and hydration.
options	`AuraOption[] \| null`	—
valuetwo-way	`string`	`''`
disabled	`boolean`	`false`
onchange	`(value: string) => void`	—

Name	Type	Default
label	`string`	—
name	`string`	—
options	`AuraOption[] \| null`	`[]`
value	`string`	`''`
disabled	`boolean`	`false`
valueChangeevent	`EventEmitter<string>`	—

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-fieldset	base	Required. A modifier does nothing without it.
.aura-radio	base	Required. A modifier does nothing without it.
.aura-check	base	Required. A modifier does nothing without it.

Tokens and rules

components.css

dot: var(--radio-size) · 999px
selected: var(--accent)
frame: var(--field-border) · var(--r2)
keyboard: native — arrows move and select