Input

Stable

Single-line text field with optional prefix and suffix. Give it a label prop for a complete field, or place it inside a Field.

Updated Oct 16, 2026

Workbench

Rendered with the real component

Light

Token name

Dot-separated path, lowercase.

Dark

Token name

Dot-separated path, lowercase.

When to use

Use it for

Short free text: a name, a URL, a search query, a value with a unit.
prefix for an icon or a currency, suffix for a unit or a keyboard hint.
size follows density: sm in toolbars and filters, md in forms, lg only on sparse screens.

Not for

More than one line: use Textarea.
Numbers with steps, min and max: use NumberField (increment buttons, arrow keys, locale formatting).
Choosing from a known list: Select for under about ten options, Combobox for long or searchable lists.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

Token name

Dot-separated path, lowercase.

Label above, format help in the hint

The label stays visible while typing; the hint answers the question before it is asked.

Spacing

Units in the suffix

The value stays a number the user can edit; the unit is context, not content.

Token name

Required.

Don't

Clearing the value on error

Keep what the user typed and say how to fix it.

Accessibility

Anatomy and tokens

Read from packages/react/src/components/Input/Input.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

26 tokens 16 semantic or component, change with theme and brand 5 density, change with comfortable or compact 5 from the shared scales

Bordered box (holds prefix, input and suffix) .control

--control-height-md --control-padding-x-md --space-2 --border-width-default --input-border --input-radius --input-bg --input-text --font-family-sans --font-size-200 --motion-duration-instant --motion-easing-standard
Size sm .sm

--control-height-sm --control-padding-x-sm
Size lg .lg

--control-height-lg --font-size-300
Bordered box (holds prefix, input and suffix), hover @media (hover: hover) .control:hover:not(:has(input[data-disabled], input[data-invalid], input[aria-invalid="true"]))

--input-border-hover
Bordered box (holds prefix, input and suffix) .control:focus-within

--focus-ring-color --border-width-default
Bordered box (holds prefix, input and suffix) .control:has(input[data-invalid]), .control:has(input[aria-invalid="true"])

--input-border-invalid
Bordered box (holds prefix, input and suffix) .control:has(input[data-invalid]):focus-within, .control:has(input[aria-invalid="true"]):focus-within

--border-width-default --input-border-invalid
Bordered box (holds prefix, input and suffix) .control:has(input[data-disabled])

--color-border-default --input-bg-disabled --color-text-disabled
Bordered box (holds prefix, input and suffix) .control:has(input[readonly])

--color-border-default --color-bg-subtle
Native input .input

--border-width-default --font-line-height-normal
Native input, placeholder .input::placeholder

--input-placeholder
Prefix or suffix .affix

--color-text-muted
Bordered box (holds prefix, input and suffix) @media (pointer: coarse) .control

--font-size-300

Props

Parsed from the TypeScript types in packages/react/src/components/Input/Input.tsx, so this table cannot drift from the code. It also accepts every native <input> attribute except size, prefix.

Prop	Type	Default	Description
`label`	`string`	none	Visible label. When set, the Input wraps itself in a Field (label, hint, error wired for you). Leave it unset when the Input is already inside a Field.
`hint`	`ReactNode`	none	Helper text under the label (Field description).
`error`	`ReactNode`	none	Error message. Marks the input invalid and announces the message.
`prefix`	`ReactNode`	none	Content before the value: an Icon, a currency symbol, a unit. Decorative unless it is text.
`suffix`	`ReactNode`	none	Content after the value: a unit, a Kbd hint, a clear IconButton.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height follows the density tokens. Default `md`.
`hideLabel`	`boolean`	none	Visually hide the Field label (still the accessible name). Only with `label`.
`onValueChange`	`(value: string) => void`	none	Called with the new string value on every change.

Playground

Change the props and see the real Input update. Controls are generated from the TypeScript props; nothing here changes the system.

Token name

Dot-separated path, lowercase.

<Input
  label="Token name"
  placeholder="color.action.primary.bg"
  hint="Dot-separated path, lowercase."
/>

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Input in Storybook) .

Embed Storybook stories here (6)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Default

WithError

Required

PrefixAndSuffix

Search_

AllStates

Changelog

New

Forms: Field (label, description, error wired by Base UI Field) and Input rebuilt on it (prefix, suffix, sizes; label, hint and error props kept). New Textarea (autosize, character count), Select (groups, descriptions), Combobox (filtering, async loading and empty states, multiple with chips), Checkbox (indeterminate, parent), CheckboxGroup, RadioGroup, Switch, Slider (single and range), NumberField (steppers, units) and Form (server errors with a focusable error summary, FormActions footer).

Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026
New

Bridge token system v1. Adds a brand mapping layer (`bridge` default, `ocean` alternate) between primitives and semantic tokens, a component tier (button, input, checkbox, switch, slider, card, popup, dialog, tooltip, toast, table, tabs, progress, nav), comfortable and compact density, motion durations and easings with a reduced-motion override, layers (z-index), icon sizes, breakpoints, a 1.2 type scale from 14px with tracking tokens, and self-hosted IBM Plex Sans and Mono (`@bridge-ds/tokens/fonts.css`). Primitives are regenerated in OKLCH on one lightness ladder. The build now writes `dist/resolved.json` and fails when any pair in `contrast.checks.json` drops below its WCAG minimum in any brand and theme. Fixes `color.border.strong` against `color.surface.default` (now at least 3:1 in both themes).

Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026
Fix

Add usage guidance files for Button, Input, Badge and Card, plus the list of color pairs to check for contrast. They feed the new documentation site; no visual or API change.

Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026
New

Initial foundation: DTCG 2025.10 primitives and light/dark semantic tokens built to CSS variables, plus Button, Input, Badge and Card consuming tokens only.

Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes