Forms (User Guide)
The six form screens — inputs, layouts, plugins, validation, inline editing, and editors.
The six form screens — a showcase of every input, layout, validation behaviour, and editor available for building data-entry pages.
Where to find them all: Components → Forms. Routes are under /forms/*.
Form Elements
What it is: the complete catalogue of basic inputs — text fields, text areas, selects, checkboxes, radios, switches, labels, and hints — in their normal, focused, disabled, and error states.
Where to find it: Components → Forms → Form Elements. Route: /forms/elements.
How to use it: type into and toggle the controls to see how each behaves and how error/hint text appears beneath a field.
Form Layouts
What it is: examples of how to arrange fields into real forms — stacked, two-column, grouped sections, and forms with side panels.
Where to find it: Components → Forms → Form Layouts. Route: /forms/layouts.
How to use it: use these as patterns for laying out your own forms (settings pages, profile forms, etc.).
Form Plugins
What it is: the richer, "plugin" inputs — date pickers, time and date-range pickers, a colour picker, tag inputs, phone inputs, one-time-code inputs, file upload, sliders, and more.
Where to find it: Components → Forms → Form Plugins. Route: /forms/plugins.
How to use it: open the pickers, drag the sliders, and try the file-upload area to see each advanced control in action.
Form Validation
What it is: a live example form that validates as you type and on submit, showing inline error messages.
Where to find it: Components → Forms → Form Validation. Route: /forms/validation.
How to use it
- Fill in the fields — leave some blank or enter invalid values.
- Try to submit; invalid fields turn red with an explanatory message.
- Correct them and submit again to see the success state.
Inline Editable
What it is: a pattern where you click a value on the page to edit it in place, then save or cancel — useful for editing records without a separate form.
Where to find it: Components → Forms → Inline Editable. Route: /forms/inline-editable.
How to use it: click an editable value, change it, and confirm. Press Esc to cancel.
Editors (rich text)
What it is: full rich-text editors — bold/italic/underline, headings, lists, links, text alignment, and placeholders — for composing formatted content.
Where to find it: Components → Forms → Editors. Route: /forms/editors.
How to use it: type in an editor and use the toolbar to format text. Use these wherever you need formatted content (descriptions, notes, email bodies).
Tips
- These pages are a catalogue — they demonstrate the controls rather than save data.
- Every input adapts to your theme and skin and shows a clear error state when invalid.
- Developers: the full input reference (props, the shared validation helper, all pickers and editors) is in the Form Components guide.
Related
Was this page helpful?