Fieldset

The Fieldset provides an accessible way to group a set of form components. It handles the legend, description, orientation, error message, as well as the required, and disabled states. The Fieldset determines the presentation and selection of the items in the list.

View in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Fieldset } from '@adaptavant/eds-core';

Legend​

Describes the purpose of the field.

Preferred contact method
{/* legend */}
<Fieldset legend="Preferred contact method">
  <Checkbox label="Phone" name="option" size="standard" value="phone" />
  <Checkbox label="Email" name="option" size="standard" value="email" />
  <Checkbox label="SMS" name="option" size="standard" value="sms" />
</Fieldset>
View in Playroom

Description​

A description of the field. Provides a hint such as specific requirements for what to choose.

Preferred contact methodPlease check all that apply.
{/* Description */}
<Fieldset
  description="Please check all that apply."
  legend="Preferred contact method"
>
  <Checkbox label="Phone" name="option" size="standard" value="phone" />
  <Checkbox label="Email" name="option" size="standard" value="email" />
  <Checkbox label="SMS" name="option" size="standard" value="sms" />
</Fieldset>
View in Playroom

Orientation​

Indicates whether the orientation of the form controls inside of the Fieldset are horizontal or vertical (defaults to vertical).

Preferred contact methodPlease check all that apply.
<Fieldset
  legend="Preferred contact method"
  description="Please check all that apply."
  orientation="horizontal"
>
  <Checkbox label="Phone" name="option" size="standard" value="phone" />
  <Checkbox label="Email" name="option" size="standard" value="email" />
  <Checkbox label="SMS" name="option" size="standard" value="sms" />
</Fieldset>
View in Playroom

Required fields​

Use the isRequired prop if user input is required on the field before form submission.

Preferred contact methodPlease check all that apply.
{/* isRequired */}
<Fieldset
  description="Please check all that apply."
  legend="Preferred contact method"
  isRequired
>
  <Checkbox label="Phone" name="option" size="standard" value="phone" />
  <Checkbox label="Email" name="option" size="standard" value="email" />
  <Checkbox label="SMS" name="option" size="standard" value="sms" />
</Fieldset>
View in Playroom

Disabled​

Use the isDisabled prop to show that form controls within a Fieldset aren't usable.

Preferred contact methodPlease check all that apply.
{/* isDisabled */}
<Fieldset
  description="Please check all that apply."
  legend="Preferred contact method"
  isDisabled
>
  <Checkbox label="Phone" name="option" size="standard" value="phone" />
  <Checkbox label="Email" name="option" size="standard" value="email" />
  <Checkbox label="SMS" name="option" size="standard" value="sms" />
</Fieldset>
View in Playroom

Error Messages​

Use the errorMessage prop to show that form controls within a Fieldset are in an error state.

Preferred contact methodPlease check all that apply.
{/* errorMessage */}
<Fieldset
  description="Please check all that apply."
  legend="Preferred contact method"
  errorMessage="Please select at least one option."
>
  <Checkbox label="Phone" name="option" size="standard" value="phone" />
  <Checkbox label="Email" name="option" size="standard" value="email" />
  <Checkbox label="SMS" name="option" size="standard" value="sms" />
</Fieldset>
View in Playroom

API Reference​

Fieldset

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

Fieldset parts​

Contact InformationPlease fill in your contact details
Payment Details
{/* Styling the legend and description */}
<Fieldset
	className="border-2 border-accent rounded-lg p-4"
	classNames={{
		legend: 'text-primary bg-critical px-2 py-1 font-bold mb-0',
		description: 'text-secondary italic',
		wrapper: 'px-2 py-4 gap-y-0 bg-positive'
	}}
	legend="Contact Information"
	description="Please fill in your contact details"
>
	<Stack className="items-stretch w-full gap-2">
		<Field label="Name">
			<TextInput />
		</Field>
		<Field label="Email">
			<TextInput />
		</Field>
	</Stack>
</Fieldset>

{/* Styling error states */}
<Fieldset
	classNames={{
		errorTrack: 'bg-caution items-center p-2 rounded-lg',
		errorIcon: 'fill-primary',
		errorMessage: 'text-neutral font-strong'
	}}
	legend="Payment Details"
	errorMessage="Please complete all required fields"
>
	<Stack className="items-stretch w-full gap-2">
		<Field label="Card Number">
			<TextInput />
		</Field>
		<Field label="Expiry Date">
			<TextInput />
		</Field>
	</Stack>
</Fieldset>
View in Playroom

Stylable Parts

Description

legend

The text that describes the purpose of the fieldset group.

description

The hint text that provides additional information about the fieldset.

wrapper

The container that wraps the fieldset content.

errorTrack

The container for the error message and icon.

errorIcon

The icon displayed when the fieldset has an error.

errorMessage

The text that displays the error message.