Fieldset — Aura

Code

index.html

<fieldset class="aura-fieldset">
  <legend>Notifications</legend>
  <div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3)">
    <label class="aura-check">
      <input type="checkbox" class="aura-checkbox" checked />
      <span>Email</span>
    </label>
    <label class="aura-check">
      <input type="checkbox" class="aura-checkbox" />
      <span>Push</span>
    </label>
  </div>
</fieldset>

Demo.tsx

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

export default function Demo() {
  return (
    <Fieldset legend="Notifications">
      <Stack gap={3}>
        <Checkbox label="Email" defaultChecked />
        <Checkbox label="Push" />
      </Stack>
    </Fieldset>
  );
}

Demo.vue

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

<template>
  <Fieldset legend="Notifications">
    <Checkbox label="Email" />
  </Fieldset>
</template>

Demo.svelte

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

<Fieldset legend="Notifications">
  <Checkbox label="Email" />
</Fieldset>

Used as aura-fieldset.

demo.component.ts

import { AuraFieldset, AuraCheckbox } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraFieldset, AuraCheckbox],
  template: `<aura-fieldset legend="Notifications">
    <aura-checkbox label="Email" [checked]="true" />
  </aura-fieldset>`,
})
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
legend	`string`	—
disabled	`boolean`	—	Disables every control inside. Note it does not set their `disabled` property — the inheritance is only visible to `:disabled`.

Name	Type	Default	Notes
legend	`string`	—

Name	Type	Default	Notes
legend	`string`	—

Name	Type	Default	Notes
legend	`string`	—
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-fieldset	base	Required. A modifier does nothing without it.

Tokens and rules

components.css

frame: var(--field-border) · var(--r2)
padding: var(--space-4)
legend: var(--text-muted)
min-inline-size: 0 — a fieldset's default is min-content, which refuses to shrink