Components

Forms

Field, Input, Select, and Textarea — all share the .control visual treatment. Field is the wrapper that ties labels, help text, and error states together.

Example form

Full name

Course

Work email

Please enter a valid email address.

Notes

Input — states

Invalid state is applied via the parent .field.invalid class (or invalid prop on Field).

Select

Textarea

Field — help & error states

Username

Must be 3–20 characters, letters and numbers only.

Please enter a valid email address.

Required field *

Props — Field

Prop	Type	Default	Description
`label`	`string`	—	Visible label (required)
`id`	`string`	—	Ties label to control via htmlFor
`help`	`string`	—	Help text below control
`error`	`string`	—	Error message; triggers invalid styling
`invalid`	`boolean`	`false`	Force invalid state without error text
`required`	`boolean`	`false`	Shows * indicator on label