← Back to Components

Form Fieldset

Semantic form grouping component using fieldset and legend elements for better accessibility and visual organization of related form fields.

Form Fieldset Grouping

Basic Fieldset Usage

Use fieldsets to semantically group related form fields with legend labels for better accessibility and visual organization.

Personal Information

Please provide your personal details

First Name

Enter your first name

Last Name

Enter your last name

Date of Birth

MM/DD/YYYY format

Contact Information

Email Address

Your primary email address

Phone Number

Include area code

Extension

Optional

Fieldset Sizes

Fieldsets support three size variants affecting padding and legend typography.

Large Fieldset (lg)

More spacious padding for prominent sections

Sample Field

Medium Fieldset (md)

Standard padding for regular sections

Sample Field

Small Fieldset (sm)

Compact padding for dense layouts

Sample Field

Fieldset States

Fieldsets support error and disabled states for form validation and progressive enhancement.

Preferences & Settings

Please select at least one communication preference

Communication Preferences

How would you like to receive updates?

Notification Frequency

How often should we contact you?

Emergency Contact

This section is currently disabled

Emergency Contact Name

Relationship

Complex Fieldset Examples

Real-world examples showing fieldsets with various form controls including checkboxes and radio buttons.

Billing Address

Street Address

Your billing address

City

State

ZIP Code

Contact Preferences

Tell us how you'd like to be contacted

Preferred Contact Method

Email - Best for detailed information

Phone - For urgent matters only

Text message - For brief updates

Physical mail - For official documents

Choose your preferred way to receive communications

Additional Preferences

Send me product newsletters

Enable push notifications

Select additional communication options