Form controls
Inputs, pickers and the containers that label them. Every control here is controlled: it renders the value it is given and reports changes through its callback.
Overview
The following components are available:
| Component | Description |
|---|---|
AccessRightSelect | Drop-down for choosing an access level, with an icon, a description and a paid badge on each row. |
Calendar | Month grid for picking a day, with month and year views behind it. |
Checkbox | Checkbox with a label, an indeterminate state and an optional help button. |
ColorInput | Hex field with a swatch that opens a colour picker. |
ColorPicker | Saturation square with a hue strip for choosing a colour, with or without a hex field and buttons. |
ComboBox | Button showing the current choice, with a list of options under it. |
DatePicker | Button that becomes a removable chip once a date is chosen, with a calendar behind it. |
DateTimePicker | A date chip and a time beside it, editable in place. |
EmailInput | Text field that parses what is typed as an email address and colours itself when it does not parse. |
FieldContainer | Layout wrapper for one form field: an optional label with a help tooltip, the control itself, and its error message. |
FileInput | Read-only field with a folder icon that opens the file dialog and accepts a drop. |
FormWrapper | White card of a fixed width that the portal's sign-in and wizard forms sit on. |
InputBlock | Text field with an icon at the end and room for a prefix before it, inside one border. |
Label | Caption for a form field, with an optional required asterisk and an error colour. |
PasswordInput | Password field with a reveal eye, a strength tooltip and a generator. |
QuantityPicker | Minus and plus around a number, with an optional slider and quick-add chips. |
RadioButtonGroup | A set of radio buttons built from an array, with the selected value handled for you. |
RadioButton | One option of a single-choice set, drawn as a labelled circle. |
SearchInput | Search field with a magnifier, an optional clear button and a debounced change callback. |
Slider | Range input with the kit's own track and handle. |
TextInput | Controlled single-line text field in three fixed widths, with optional masking, error and warning states. |
Textarea | Multi-line text field that grows with its content, with optional line numbers, a copy button and a JSON mode. |
TimePicker | Two small fields, hours and minutes, that move the caret along as you type. |
ToggleButton | Switch for one on/off setting, with an optional label beside it. |