Fieldset

Groups related form fields with an accessible legend.
1<Fieldset legend="Personal Information">
2  <Field label="First Name" required>
3    <InputField placeholder="John" />
4  </Field>
5  <Field label="Last Name" required>
6    <InputField placeholder="Doe" />
7  </Field>
8  <Field label="Email" required>
9    <InputField type="email" placeholder="john@example.com" />
10  </Field>
11</Fieldset>

Anatomy

Fieldset supports a simple props API and a sub-component API.

Simple API

1import { Fieldset, Field, InputField } from "@raystack/apsara";
2

3<Fieldset legend="Personal Information">
4  <Field label="First Name">
5    <InputField placeholder="John" />
6  </Field>
7  <Field label="Last Name">
8    <InputField placeholder="Doe" />
9  </Field>
10</Fieldset>

Sub-component API

1import { Fieldset, Field, InputField } from "@raystack/apsara";
2

3<Fieldset>
4  <Fieldset.Legend>Personal Information</Fieldset.Legend>
5  <Field label="First Name">
6    <InputField placeholder="John" />
7  </Field>
8</Fieldset>

API Reference

Root

Groups related fields with a shared legend. Renders a <fieldset> element.

Prop

Type

Legend

An accessible legend for the fieldset. Renders a <div> element with role="presentation".

Prop

Type

Examples

Basic Fieldset

A fieldset grouping related fields with a legend.

1<Fieldset legend="Contact Details">
2  <Field label="Phone" required>
3    <InputField type="tel" placeholder="+1 (555) 000-0000" />
4  </Field>
5  <Field label="Address" optional>
6    <InputField placeholder="123 Main St" />
7  </Field>
8</Fieldset>

Sub-component API

Using Fieldset.Legend for custom legend styling.

1<Fieldset>
2  <Fieldset.Legend>Account Settings</Fieldset.Legend>
3  <Field label="Username" required>
4    <InputField placeholder="Enter username" />
5  </Field>
6  <Field label="Password" required>
7    <InputField type="password" placeholder="Enter password" />
8  </Field>
9</Fieldset>

Disabled Fieldset

All fields within a disabled fieldset are disabled.

1<Fieldset legend="Disabled Section" disabled>
2  <Field label="Read Only Field">
3    <InputField placeholder="Cannot edit" />
4  </Field>
5  <Field label="Another Field">
6    <InputField placeholder="Also disabled" />
7  </Field>
8</Fieldset>

Nested Fieldsets

Fieldsets can be nested to create logical groupings.

1<Form>
2  <Fieldset legend="Personal Info">
3    <Field label="Full Name" required>
4      <InputField placeholder="John Doe" />
5    </Field>
6  </Fieldset>
7  <Fieldset legend="Work Info">
8    <Field label="Company" required>
9      <InputField placeholder="Acme Inc." />
10    </Field>
11    <Field label="Role" optional>
12      <InputField placeholder="Software Engineer" />
13    </Field>
14  </Fieldset>
15  <Button type="submit">Save</Button>

Accessibility

  • Renders a native <fieldset> element for semantic grouping
  • Fieldset.Legend provides an accessible name for the group
  • The disabled prop propagates to all child form controls