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.

The errorMessage prop is  ⚠️ deprecated and will be removed in a future release, please check the FieldMessage section to add 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

Status​

Use the status prop to indicate whether a field is in an error or warning state.

Preferred contact methodPlease check all that apply.
Preferred contact methodPlease check all that apply.
<Stack className="gap-4">
  <Fieldset
    description="Please check all that apply."
    legend="Preferred contact method"
    status="error"
  >
    <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>
  <Fieldset
    description="Please check all that apply."
    legend="Preferred contact method"
    status="warning"
  >
    <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>
</Stack>
View in Playroom

FieldMessage​

Use the status prop to signal that controls in a Fieldset are in an error or warning state, and fieldMessage to provide the reason.

Preferred contact methodPlease check all that apply.
Preferred contact methodPlease check all that apply.
<Stack className="gap-4">
  <Fieldset
    description="Please check all that apply."
    legend="Preferred contact method"
    status="error"
    fieldMessage="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>
  <Fieldset
    description="Please check all that apply."
    legend="Preferred contact method"
    status="warning"
    fieldMessage="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>
</Stack>
View in Playroom

API Reference​

Fieldset​

PropTypeDescriptionDefault
childrenReact.ReactNodeThe form elements to be grouped together, such as Field, Checkbox, Radio or TextInput._
description?React.ReactNodeAdditional text that appears below the legend to provide context or instructions for the entire group of form controls._
id?stringA unique identifier for the fieldset, useful for form accessibility and targeting with CSS or JavaScript._
isDisabled?booleanWhen set to true, disables all form controls within the fieldset, preventing user interaction and applying a disabled visual style.false
isRequired?booleanWhether user input is required on the input before form submission.false
legendReact.ReactNodeThe title or heading for the fieldset that clearly identifies the purpose of the grouped form controls._
errorMessage?React.ReactNodeText displayed when validation fails, highlighting what needs to be corrected. Adds visual error styling and announces the error to screen readers._
status?error | warningUse the status prop to indicate whether a field is in an error or warning state._
fieldMessage?stringUse the status and fieldMessage props to convey why the field is in an error or warning state. The message is announced on focus for screen readers.
orientation?'horizontal' | 'vertical'Controls the layout direction of the form elements within the fieldset - either side-by-side (horizontal) or stacked (vertical).'vertical'

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 PartsDescription
legendThe text that describes the purpose of the fieldset group.
descriptionThe hint text that provides additional information about the fieldset.
wrapperThe container that wraps the fieldset content.
errorTrackThe container for the error message and icon.
errorIconThe icon displayed when the fieldset has an error.
errorMessageThe text that displays the error message.