Tollerud UI / Forms / Form row
Forms

Forms

Every input control, all states, and the higher-order patterns — combobox, date picker, file upload, tag entry and live validation.

All states: default, filled, focused, error, disabled, and readonly. Labels and inline errors are built in.

PropsInputProps
PropType
label?string
error?string

Could not resolve host

inputs

Textarea & Select

Multiline entry and a styled native select with custom chevron.

textarea-select

Toggles

Checkbox, switch and radio group — all keyboard accessible with custom indicators.

Deploy target
toggles

Slider

Range input with a yellow thumb and a live value readout.

64
slider

Date picker

A calendar popover for date selection — the control native HTML handles poorly.

datepicker

File upload

A drag-and-drop dropzone. Drop files or click to browse; accepted files are listed with a remove button.

Click to upload or drag and drop

compose.yml, .env, certs · up to 10 MB

upload

Tag input

Chip-style tag entry. Press Enter to add, Backspace to remove the last tag.

productiondocker
tags

Type in the field to filter options as you search. Keyboard navigation (↑/↓/Enter/Esc), optional grouped section titles that collapse when empty, and a no-results state.

Type to filter the flat list — try iris or pia.

Type to filter across groups — try deploy to collapse to the Actions section.

combobox

Password input & spinner

Password field with show/hide toggle, optional label action, and inline loading spinner.

password-input

Label + hint on the left, control on the right. Canonical settings-form layout; stacks on narrow viewports.

Shown across the dashboard and in activity logs.

Require a TOTP code at sign-in.

form-row

Validation

Errors surface on submit and clear as the user corrects. Success and failure both confirm with a toast.

validation