Skip to content
quartiledocsv0.1
GitHub

TextField

Preview

Text and number inputs with a label, a hint or an error, prefixes, suffixes, icons and shortcut hints.

Example

Shown in the sidebar
Target must be a positive number.
locked
<TextField label="Report name" placeholder="e.g. Weekly revenue" hint="Shown in the sidebar" />

<NumberField
  label="Target"
  prefix="$"
  value={target}
  onChange={setTarget}
  error={target != null && target < 0 ? 'Target must be a positive number.' : undefined}
/>

<TextField label="Data source" defaultValue="warehouse.orders" suffix="locked" disabled />
<TextField label="Search" type="search" icon={<IconSearch />} placeholder="Metrics, charts…" />

Usage

TextField spreads native input attributes. prefix is an attached segment, suffix sits inside the right edge, and shortcut shows a key hint (set focusOnShortcut to make it work).

NumberField's value is a number or null. It shows grouped digits when not focused, and ↑ / ↓ step the value (Shift for ten steps). onChange fires with every parseable value while typing, and again on blur after clamping to min and max.

Props

TextField

PropTypeDefaultDescription
labelReactNode——
hintReactNode—Help text under the input.
errorReactNode—Error message; sets aria-invalid. Pass true for invalid styling without a message.
prefixReactNode—Attached segment before the input, e.g. a currency symbol.
suffixReactNode—Text inside the input's right edge, e.g. a unit ("USD") or a status ("locked").
iconReactNode—Icon inside the input's left edge.
shortcutstring—Keyboard hint shown at the right edge, e.g. "⌘K". Display only unless focusOnShortcut.
focusOnShortcutbooleanfalseFocus the input when the shortcut chord is pressed anywhere (⌘ also matches Ctrl).
size'sm' | 'md' | 'lg'InputSize'md'—
monoboolean—Mono, tabular figures. Defaults to true for numeric inputMode/type.
classNamestring—Class for the root column (label, control, message).
styleCSSProperties——
controlClassNamestring—Class for the bordered control box.

Also accepts the props of Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>, spread onto the root element.

NumberField

Also accepts every TextField prop except the value and input-type props.

PropTypeDefaultDescription
valuenumber | null——
defaultValuenumber | nullnull—
onChange(value: number | null) => void—Called while typing with every parseable value, and on blur after clamping.
minnumber——
maxnumber——
stepnumber1↑ / ↓ step. Shift multiplies it by 10.
fractionDigitsnumber—Fixed number of decimals in the formatted value.
format(value: number) => string—Display format when the field is not focused. Defaults to grouped digits in the locale.

Also accepts the props of Omit< TextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'type' | 'min' | 'max' | 'step' | 'inputMode' >, spread onto the root element.

Accessibility

  • The label is attached to the input, and the hint or error describes it.
  • error sets aria-invalid; pass true for invalid styling without a message.
Report an issueBuilt Oct 21, 2026