Radio

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

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

export default function Demo() {
  // Одиночная радиокнопка — в этом и смысл примера: сама по себе она взаимоисключающа только с
  // теми, у кого тот же `name`. Берите RadioGroup, если только не раскладываете группу вручную: он
  // передаёт name вниз и даёт fieldset с legend.
  return (
    <Stack gap={3}>
      <Radio label="Comfortable" name="density-solo" value="comfortable" defaultChecked />
      <Radio label="Compact" name="density-solo" value="compact" />
    </Stack>
  );
}

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

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

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

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

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

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