Fieldset

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

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

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

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

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

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

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