Text inputs & pickers
The fields every Buildpad form, filter bar and record view is built from. They
share one anatomy — label, description, input, error — so a TextInput, a
Select and a NumberInput line up in the same form without extra work.
Anatomy & states
Label, description, placeholder, required asterisk, error, disabled and read-only on TextInput.
As it appears on invoices
description + placeholder. Tab in to see the ember focus ring (--ds-focus-ring).Assigned by Finance
withAsterisk (or required, which also sets the native attribute).Enter a valid email address
error turns the border, text and message to the danger scale and sets aria-invalid.disabled — muted surface, not focusable, not submitted.readOnly — keeps the normal surface, focusable and selectable, but not editable.Variants
The variant prop is shared by every input.
default is the form field; filled suits dense toolbars and filters; unstyled drops the chrome for inputs embedded in custom surfaces (inline titles, table cells). The gray-300 border and focus override in globals.css apply to default only.Sizes
Five steps from xs to xl; every input below accepts the same size.
xs → xl scale height, padding and input font; the theme keeps labels at sm for one form rhythm. sm (36px) is the default; use xs in dense tables and inline edits, md+ for sign-in and hero forms.Sections
leftSection and rightSection hold icons, units, actions and status.
leftSection with a 16px Tabler icon at stroke 1.75.kg
https://
rightSection / leftSection; widen with leftSectionWidth.Input.ClearButton in rightSection with rightSectionPointerEvents="auto". Type to bring it back.Kbd in rightSection — the global search pattern.Loader size="xs" in rightSection while a value is checked remotely.c="green" resolves to the success scale.Password
PasswordInput with a built-in visibility toggle and a composed strength meter.
At least 8 characters
Includes a number
Includes a lowercase letter
Includes an uppercase letter
Includes a special symbol
Progress segments + a rule list. Colour steps red → yellow → green (danger / warning / success).Passwords do not match
error and disabled behave like TextInput.Numbers
NumberInput formats while you type and clamps to a range.
prefix="$" + thousandSeparator + decimalScale={2} fixedDecimalScale.suffix="%" with min/max and clampBehavior="strict" — out-of-range keystrokes are rejected.Between 1 and 500 cartons
step, min, max and arrow keys.Must be at least 1
error on blur-validation; disabled hides the controls' affordance.Textarea
Multi-line text that grows with its content.
89 / 280 characters
autosize minRows={3} maxRows={6}; the count lives in description.A reason is required
resize="vertical" lets users drag the height; error and disabled as usual.Select
Pick one value from a list — searchable, clearable, grouped, with custom options.
dropdownOpened + comboboxProps={{ withinPortal: false }}. Groups via { group, items } data; icons via renderOption.Owner is on leave until 04 Nov
searchable filters as you type, clearable adds the × and nothingFoundMessage covers the empty result.Multi-value inputs
MultiSelect picks several known values, TagsInput takes free-form tags and Autocomplete suggests while you type.
Up to three people
Pick at least one team
Pills; searchable, clearable, hidePickedOptions, maxValues.Press Enter to add
, commits a tag; data offers suggestions.Unknown carrier — pick a suggestion
data). Shown open with the query “a”; dropdownOpened preview.Pills input
Build a custom token field from PillsInput and Pill.
Enter or comma adds; Backspace removes the last
PillsInput + Pill.Group + PillsInput.Field, for custom token fields.Pill on its own for read-only token lists; size xs–xl.Special inputs
NativeSelect, PinInput, FileInput, ColorInput and JsonInput.
<select> — best on mobile and for short fixed lists. Supports grouped data.Sent to amelia.hart@northwind.io
Incorrect PIN — 2 attempts left
length={6} type="number" oneTimeCode; wrap in Input.Wrapper for a label. error and mask shown below.clearable, multiple, accept. For drag-and-drop, Buildpad uses its own upload interface.Enter a 6-digit hex colour
format="hex" with swatches (the Ink & Ember mains as sample data); opens a picker on focus.Invalid JSON — remove the trailing comma
formatOnBlur pretty-prints valid JSON; validationError shows when it does not parse. Monospace via --ds-font-mono.Date pickers
DatePickerInput and DatePicker from @mantine/dates — what the datetime interface renders for date fields.
popoverProps={{ opened: true, withinPortal: false }}. The selected day is the filled primary (ember); highlightToday outlines today.Can't be before the invoice date
placeholder, clearable, error, readOnly (no dropdown) and disabled.Up to 90 days
Overlaps a scheduled delivery
[start, end] tuple. allowSingleDateInRange permits a one-day window.size="xs" in filter bars and table toolbars, the default sm in forms, md on sparse settings pages.| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
type="range" numberOfColumns={2} highlightToday. Ends are filled primary, the days between take the light primary tint. Weekends use Mantine’s default red — the theme does not override weekendDays.Date & time
DateTimePicker for timestamps, TimeInput and TimePicker for times of day.
type="timestamp": a calendar, a time field and a submit button in one dropdown.Dock is closed between 22:00 and 06:00
placeholder, withSeconds, clearable, error and disabled.Must be 22:00 or earlier
type="time" input in the theme’s input chrome; minTime / maxTime bound it.withDropdown format="12h": hour, minute and AM/PM columns. The selected cells use the light primary tint.Rich text editor
RichTextEditor from @mantine/tiptap — the editor behind the rich-text-html and rich-text-markdown interfaces.
Shown to approvers and the supplier
RichTextEditor.Toolbar sticky with ControlsGroups for marks, headings, lists, links and alignment. The caret sits in bold text, so Bold shows its data-active state (light primary). Mantine draws no focus ring on the editor itself.Add the receiving dock and contact
--ds-danger (.rich-text-html-editor--error); a compact toolbar here.editable: false — the content keeps its typography; the toolbar is left out so nothing suggests it can be edited.Fieldset
Group related fields under a legend.
legend names the group and is read by screen readers with every field inside.disabled on the Fieldset disables every control inside it natively.Inline edit
Edit one value in place on a record view without opening a form.
Supplier
Reference
Cost centre
size="xs" input keeps the row height; Enter saves, Escape cancels. Save is the theme-default ActionIcon (ember), cancel is variant="default".