Forms
Fields with one look and one message system: a label with a required or optional mark, help text, a status in the ok, info or warn tone, and an error with an icon. Every message is linked to its control, errors set aria-invalid, and a summary links to the fields after a failed submit. Built to WCAG 2.2 AA, from 320px up.
21 pages, 23 exports
- Field
- FormErrorSummary
- Input
- TextField
- Textarea
- Select
- MultiSelect
- Checkbox
- CheckboxGroup
- Radio
- RadioGroup
- Switch
- Range
- FileInput
- ColorInput
- DateInput
- DateTimeInput
- SearchField
- InputWithIcon
- ChipInput
- SettingRow
- ToggleRow
- FormActions
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { Field, FormErrorSummary, Input, TextField, … } from '@skribly/ui/forms'Pages in this groupLink to the section Pages in this group
- FieldLabel, help, status and error around a control that is not one of this group, such as a native element or a widget from another library. Pick a ready field such as TextField when one fits.Field
- FormErrorSummaryThe list of problems after a submit fails, placed at the top of the form. Use it with inline errors on each field, never instead of them.FormErrorSummary
- InputThe bare text box, for building a field from React Aria parts or for a Field around it. Most forms want TextField, which includes the label.Input
- TextFieldA labelled single-line field: names, titles, emails, URLs. It shows the four message tones: help in muted text, ok, info and warn with an icon, and the error.TextField
- TextareaMulti-line text, such as a description or a note. Turn on monospace for Markdown or code, and add a counter when there is a limit.Textarea
- SelectOne choice from a list of up to about fifteen options. For more, or when people know what to type, a searchable combo box fits better.Select
- MultiSelectSeveral choices from a known list, such as labels or channels. For free text that becomes tags, use ChipInput.MultiSelect
- CheckboxA Checkbox is one yes or no answer saved with the form, such as accepting terms. A CheckboxGroup is several independent choices under one label.Checkbox, CheckboxGroup
- RadioGroupOne choice from two to six options that should all be visible. For more, use Select.Radio, RadioGroup
- SwitchAn on and off setting that takes effect at once, with no save button. For a choice saved with a form, use Checkbox.Switch
- RangeA value on a scale where the exact number matters less than the feel, such as text size or a price band. Pass an array for two thumbs.Range
- FileInputAttach files by picking, dropping or pasting them. It checks type and size and lists what was chosen with a remove button each.FileInput
- ColorInputA colour as a hex value, typed or picked. Presets keep choices within a palette, such as label or brand colours.ColorInput
- DateInputA day, typed segment by segment or picked in a calendar, such as a due date. The order of day, month and year follows the locale.DateInput
- DateTimeInputA day and a time in one field, such as a reminder or a release. Pass a ZonedDateTime to show the time zone.DateTimeInput
- SearchFieldText that filters or searches, with a clear button and an optional key hint. Without a visible label give it an aria-label.SearchField
- InputWithIconA text field with a leading icon and optional end text, such as a unit or a domain. The icon is a hint, never the label.InputWithIcon
- ChipInputFree text that turns into removable chips, such as topics or email addresses. For a fixed list of options, use MultiSelect.ChipInput
- SettingRowOne line of a settings list: the title and explanation on the left, any control on the right. On a narrow screen the control moves below.SettingRow
- ToggleRowA settings line that is one switch, such as a reader preference. It takes effect at once.ToggleRow
- FormActionsThe button row at the end of a form, with the result of the last submit. Put the main button last.FormActions