Fieldset

Fieldset groups related controls with native <fieldset> and <legend> semantics while keeping styling fully controlled by you.

Use it when multiple controls answer one larger question: billing details, notification channels, preference groups, or grouped consent.

Anatomy

• #default: Grouped controls.
• #legend: Custom legend content rendered inside <legend>.
• #description: Custom help text linked with aria-describedby.

The native <fieldset> root and content wrapper are generated by the component. Style them with ui.root and ui.content.

Usage

<script setup lang="ts">
import { Fieldset } from "akaza-ui";
</script>

<template>
  <Fieldset legend="Billing details">
    <!-- fields -->
  </Fieldset>
</template>

Examples

Group related fields

Use Fieldset around controls that answer one shared question.

<template>
  <Fieldset
    legend="Billing details"
    description="Used for invoices and receipts."
  >
    <Field name="name" label="Name">
      <Input />
    </Field>
    <Field name="company" label="Company">
      <Input />
    </Field>
  </Fieldset>
</template>

Disabled group

Native fieldset behavior disables the controls inside it.

<template>
  <Fieldset legend="Shipping" disabled>
    <Field name="address" label="Address">
      <Input />
    </Field>
  </Fieldset>
</template>

Invalid group

Use invalid to mark the whole group when the group-level choice has an error. Fieldset does not render a built-in error region; render group error text in the default slot or use child Field errors for individual controls.

<template>
  <Fieldset
    legend="Payment method"
    description="Choose one active payment method."
    invalid
  >
    <RadioGroup v-model="payment" :options="paymentOptions" />
    <p class="text-sm text-red-600">Choose one active payment method.</p>
  </Fieldset>
</template>

Custom legend

Use #legend when the group label needs badges, hints, or richer markup.

<template>
  <Fieldset>
    <template #legend>
      <span class="flex items-center gap-2">
        Billing details
        <span class="text-xs text-neutral-500">Required</span>
      </span>
    </template>

    <Field name="taxId" label="Tax ID">
      <Input />
    </Field>
  </Fieldset>
</template>

API Reference

Props

Slots

UI Options

State Attributes

Fieldset sets data-disabled, data-invalid, and matching data-akaza-* attributes.

invalid is a group state only. It does not create an error element or add an error id to aria-describedby; use the description prop for persistent group help text and render transient error text inside the default slot when needed.

Styling Hooks