Primitives

Radio

A single <input type="radio">. Rarely useful alone — radios are mutually exclusive only when they share a name, and arrow keys move within that group, so reach for RadioGroup unless you are laying the group out yourself.

Code

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3)">
  <label class="aura-check">
    <input type="radio" class="aura-radio" name="density-solo" value="comfortable" checked />
    <span>Comfortable</span>
  </label>
  <label class="aura-check">
    <input type="radio" class="aura-radio" name="density-solo" value="compact" />
    <span>Compact</span>
  </label>
</div>

Demo.tsx

import { Radio, Stack } from '@ilomee/aura-react';

export default function Demo() {
  // A bare radio, which is the point of showing it: on its own it is only exclusive with
  // others that share its `name`. Reach for RadioGroup unless you are laying the group out
  // yourself — it hands the name down and gives you the fieldset and legend.
  return (
    <Stack gap={3}>
      <Radio label="Comfortable" name="density-solo" value="comfortable" defaultChecked />
      <Radio label="Compact" name="density-solo" value="compact" />
    </Stack>
  );
}

A real native input under a custom paint job: it submits with a form, pairs with its label, and already carries its keyboard and screen-reader behaviour. (Switch is the deliberate exception — a <button role="switch">, which is why it does not take part in form submission.)

Demo.vue

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

<template>
  <Radio label="Compact" name="density" value="compact" />
</template>

Everything else (name, value, checked, disabled) falls through to the input.

Demo.svelte

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

<Radio label="Compact" name="density" value="compact" />

Everything else (name, value, checked, disabled) falls through to the input.

Used as aura-radio.

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraRadio],
  template: `<aura-radio label="Compact" name="density" value="compact" />`,
})
export class DemoComponent {}

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`	—
name	`string`	—	What makes a group a group.
value	`string`	—
checked	`boolean`	—
disabled	`boolean`	—

Name	Type	Default	Notes
label	`string`	—

Name	Type	Default	Notes
label	`string`	—

Name	Type	Default
label	`string`	—
name	`string`	—
value	`string`	—
checked	`boolean`	`false`
disabled	`boolean`	`false`

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-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)