Field group

Consistent structure for form layouts with labels, descriptions, and error handling.

Vertical orientation

We'll never share your email with anyone else.

Default vertical layout with label above the input.

Horizontal orientation

Horizontal layout with label beside the input.

With descriptions

This is your public display name. It can be your real name or a pseudonym.

A brief description that appears on your profile.

Descriptions provide additional context below form fields.

With errors

Error messages appear below fields with invalid input.

FieldSet with legend

Personal information

Please enter your personal details below.

FieldSets group related fields under a legend heading.

With separator

or

Separators provide visual breaks between field alternatives.

With checkbox and content

Accept terms and conditions

You agree to our terms of service and privacy policy.

Marketing emails

Receive emails about new products, features, and more.

Fields with checkboxes use a horizontal layout with title and description content.

Required fields

Optional — a brief description for your profile.

We'll use this to contact you about your order.

Required fields are indicated with a badge next to the label. Optional fields have no indicator.