Composition Gallery

Settings form

A large, sectioned form that exercises Core choices, help text, destructive confirmation, and a save bar.

Overview

Stress-tests long-form hierarchy and the distinction between immediate settings and saved fields.

Live Preview

Profile

Shown in shared areas.


Preferences

Notifications

Choose how updates reach you.

Default view
Time zone

Security

Danger zone

Deleting a workspace cannot be undone.

Unsaved changes

Code

<FormGroup title="Notifications"><Checkbox /><Checkbox /></FormGroup><Dialog title="Delete workspace">...</Dialog>

Components Used

FieldFormGroupCheckboxRadioGroupSelectTextareaSwitchDialogButtonAlert

Accessibility

FormGroup uses fieldset semantics, every switch has an accessible name, and destructive action opens a labelled dialog.

Responsive Behaviour

Sections collapse naturally to one column; the save bar wraps instead of compressing controls.

Notes

This is a documentation-local composition. A reusable settings layout, permissions model, or billing workflow would be Pro.