Kaiko UI Kaiko UI

Fieldset

Stable

Container for grouping related form controls with an optional legend title.

API Reference

Nested Components

Component Description Type Default
c-fieldset.legend The fieldset legend element — renders with fieldset-legend DaisyUI class slot —
c-fieldset.label Helper text element with label DaisyUI class for form descriptions slot —

Accessibility

Semantic grouping: c-fieldset renders a native <fieldset> element, which is the semantically correct way to group related form controls. Screen readers announce the fieldset legend when focus enters the group.

Legend: always use c-fieldset.legend when the group of controls shares a meaningful label (e.g. "Billing address", "Notification preferences"). This provides an accessible name for the entire group.

Helper text: c-fieldset.label renders below the controls as supplementary description. It is visible text but is not automatically associated as an aria-describedby — for per-field descriptions, use the hint prop on individual input components instead.

Examples

Usage 


<c-fieldset>
  <c-fieldset.legend>Page title</c-fieldset.legend>
  <c-input placeholder="My awesome page" />
  <c-fieldset.label>You can edit page title later from settings</c-fieldset.label>
</c-fieldset>

Basic Fieldset

With Legend

Page title

You can edit page title later on from settings

Without Legend

This fieldset has no legend 

<c-fieldset>
  <c-fieldset.legend>Page title</c-fieldset.legend>
  <c-input placeholder="My awesome page" />
  <c-fieldset.label>You can edit page title later on from settings</c-fieldset.label>
</c-fieldset>

Form Grouping

User Information

All fields are required for account creation

Address Details

We use this for shipping and billing 

<c-fieldset>
  <c-fieldset.legend>User Information</c-fieldset.legend>
  <div class="grid gap-2">
    <c-input placeholder="First name" />
    <c-input placeholder="Last name" />
    <c-input type="email" placeholder="Email address" />
    <c-fieldset.label>All fields are required for account creation</c-fieldset.label>
  </div>
</c-fieldset>

Checkbox Group

Notification Preferences

Choose how you'd like to receive updates 

<c-fieldset>
  <c-fieldset.legend>Notification Preferences</c-fieldset.legend>
  <div class="grid gap-4">
    <c-checkbox label="Email notifications" />
    <c-checkbox label="Push notifications" />
    <c-checkbox label="SMS notifications" />
    <c-fieldset.label>Choose how you'd like to receive updates</c-fieldset.label>
  </div>
</c-fieldset>