Fieldset

Import

import { Fieldset } from '@delightstack/components';

Basic Usage

Personal Information

First Name

Last Name

Email

View code

<Fieldset label="Personal Information">
  <Input label="First Name" name="firstName" />
  <Input label="Last Name" name="lastName" />
  <Input label="Email" type="email" name="email" />
</Fieldset>

Examples

Bordered

Bordered

Account Settings

Username*

Password*

View code

<Fieldset bordered label="Account Settings">
  <Input label="Username" name="username" required />
  <Input label="Password" type="password" name="password" required />
</Fieldset>

Grid Layout

Use grid to arrange children in a CSS grid. Children can span columns with inline styles.

Address

Street Address

City

State

ZIP Code

Country

View code

<Fieldset label="Address" grid columns={2} bordered>
  <Input label="Street Address" name="street" style="grid-column: 1 / -1" />
  <Input label="City" name="city" />
  <Input label="State" name="state" />
  <Input label="ZIP Code" name="zip" />
  <Input label="Country" name="country" />
</Fieldset>

Collapsible

Click the label, the expand stub, or press Enter/Space to expand or collapse the content. Bind collapsed for controlled state.

Advanced Options

Custom Domain

Enable API Access

View code

<script>
  import { Fieldset, Input, Toggle } from '@delightstack/components';

  let collapsed = $state(false);
</script>

<Fieldset label="Advanced Options" collapsible bind:collapsed bordered>
  <Input label="Custom Domain" name="domain" />
  <Toggle label="Enable API Access" name="api" />
</Fieldset>

With Description and Error

Profile

This information is publicly visible

Display Name

Bio

Permissions *

Read

Write

Select at least one permission

View code

<Fieldset label="Profile" description="This information is publicly visible" bordered>
  <Input label="Display Name" name="displayName" />
  <Input label="Bio" name="bio" />
</Fieldset>

<Fieldset label="Permissions" required error="Select at least one permission" bordered>
  <Checkbox checked={false} label="Read" />
  <Checkbox checked={false} label="Write" />
</Fieldset>

Skeleton Loading

Show loaded

User Profile

Name

Email

View code

<Fieldset skeleton={loading} label="User Profile" bordered>
  <Input label="Name" name="name" skeleton={loading} bind:value={name} />
  <Input label="Email" name="email" skeleton={loading} bind:value={email} />
</Fieldset>

Props

Prop	Type	Default	Description
label	string	-	Section title rendered as <legend>
description	string	-	Helper text below the label
bordered	boolean	false	Subtle border style
disabled	boolean	false	Disable all child fields natively
error	string	-	Group-level error message
required	boolean	false	Show required asterisk on label
collapsible	boolean	false	Allow collapsing the content
collapsed	boolean	false	Collapsed state, bindable
grid	boolean	false	Enable CSS Grid layout for children
columns	number	2	Number of grid columns (when grid is true)
skeleton	boolean	false	Show skeleton loading state
dense	boolean	false	Compact spacing between fields
comfortable	boolean	false	Relaxed spacing between fields
id	string	auto	Element ID
class	string	''	Additional CSS classes
children	Snippet	-	Form field content

Accessibility

• Semantic <fieldset> and <legend> HTML elements
• aria-describedby links to description and error text
• Collapsible label is keyboard-activated with Enter/Space and uses aria-expanded
• Native <fieldset disabled> propagates disabled state to all child form controls
• Error message uses role="alert" for screen reader announcements
• Required indicator shows red asterisk with aria-hidden="true"