Field
Wrapper for form controls. Vertical, horizontal, or responsive orientation, with companion components (FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet) for every layout need.
Basic
Standard layout: FieldLabel above, control in the middle, FieldDescription below.
We use this to send important account updates.
Textarea
Pair a multi-line Textarea with a label and helper text.
Share your thoughts about our service.
Select
Compose a Select control inside a Field, with a description below the trigger.
Select your department or area of work.
Slider
Use FieldTitle and FieldDescription to caption a range Slider that reflects the live value.
Set your budget range ($200 – $800).
FieldSet and FieldGroup
Wrap related fields together. FieldLegend gives the section a heading; FieldGroup is a vertical container between fields.
Checkbox
Group horizontal checkbox fields under a FieldLegend, with FieldContent for options that need a description.
Your Desktop & Documents folders are being synced with cloud storage. You can access them from other devices.
Radio
A RadioGroup of horizontal fields inside a FieldSet.
Switch
Horizontal field with FieldContent placing the label and description beside a Switch.
Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.
Choice card
Wrap a Field inside FieldLabel to turn each option into a selectable card. The checked card is highlighted automatically.
Horizontal orientation
Label and control on one row. Suits short forms and setting toggles.
Responsive orientation
orientation="responsive" stacks on narrow screens and switches to a row once the FieldGroup container hits its md breakpoint.
Validation and errors
Set data-invalid on Field, aria-invalid on the control, then use FieldError for the message.
- Username is required.