Tollerud

Tollerud UI/Forms

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

API key is required

input-required

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. Checkbox supports indeterminate for mixed select-all states (≥ 4.8.40); DataTable's header checkbox uses it automatically.

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. Use clickLabel and dragLabel for i18n.

Click to upload or drag and drop

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

Klikk for å laste opp eller dra og slipp

PDF eller PNG · maks 10 MB

upload

Tag input

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

productiondocker
tags

Searchable select with keyboard navigation (↑/↓/Enter/Esc), optional grouped sections, and a no-results state. Two search modes: searchPlacement='trigger' (default) keeps the search input as the trigger field; searchPlacement='dropdown' moves the search inside the popover so the trigger looks like a standard Select button. Both modes work inside Radix Dialog — the dropdown auto-focuses its search input on open and does not close or steal focus from the dialog, and Esc closes only the dropdown (the dialog stays open). The arrow-key highlight is announced to screen readers via aria-activedescendant and scrolls into view in long lists (≥ 4.8.40). On iOS Safari (≥ 4.8.53) the in-dropdown search field renders at ≥16px so focusing it does not auto-zoom, and the popover no longer closes on the focus/zoom scroll iOS emits — only a genuine touch drag dismisses it. Since 4.8.56 the popover is positioned by Floating UI (the same engine as Radix Popover / shadcn): it flips, shifts, clamps its height, and stays glued to the trigger across scroll, resize, and mobile viewport changes (iOS keyboard/zoom/address bar). On touch it stays open and repositions while scrolling; outside-click and Esc still dismiss it. Since 4.14.0, onCreateOption opts into a 'Create «query»' row for fields where the value a user wants may not exist yet — e.g. a category picker.

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

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

combobox
combobox-dropdown-search

Try typing Outdoor — no match, so a "Create" row appears.

combobox-create-option

Password input & spinner

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

password-input

Password strength

/forms/password-strength/

Strength bar and rule checklist for signup and change-password flows. Compose it below any PasswordInput — pass the same value string.

PropsPasswordStrengthProps
PropType
valuestring
rules?PasswordRule[]
className?string
  • At least 8 characters
  • Uppercase letter
  • Lowercase letter
  • Number
  • Special character
password-strength

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