You're in the Library

Input

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

Preview appears after the next Storybook update.

Input example
<Input />
Rendered with the real componentFrom the code
Light
Dark

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: md in forms and in a page's filter bar, sm only in dense toolbars, menus and panels, lg only on sparse screens. In a filter bar the search field, its Select and its SegmentedControl share one size, so the row reads as one height.

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.

Dot-separated path, lowercase.

Do

Label above, format help in the hint

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

px
Do

Units in the suffix

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

Required.
Don't

Clearing the value on error

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

Accessibility

  • Base UI Input: inherits label, description and error wiring from the surrounding Field.
  • The field edge (color.border.strong) has at least 3:1 contrast with the surface in both themes (WCAG 1.4.11).
  • Focus shows a 2px signal-colored edge on every focus, since users type into it.
  • On touch screens the text is 17px so iOS does not zoom the page on focus.
  • A prefix icon is decorative; if the prefix carries meaning (a currency), make it text.

Content guidelines

  • Placeholders show an example value, not instructions: "color.action.primary.bg", not "Enter a token name".
  • Errors name the problem and the fix, in one or two short sentences.

From the code Generated from the component, not editable here.

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 tokens16 semantic or component, change with theme and brand5 density, change with comfortable or compact5 from the shared scales

Motion and interaction

Input animates on hover. Try it in the preview at the top.

WhenWhat changesDurationEasing
HoverBordermotion.duration.instant75 msmotion.easing.standardsettles in place

With reduced motion turned on, every change happens at once.

From the code Generated from the component, not editable here.

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.

PropTypeDefaultDescription
labelstringnoneVisible 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.
hintReactNodenoneHelper text under the label (Field description).
errorReactNodenoneError message. Marks the input invalid and announces the message.
prefixReactNodenoneContent before the value: an Icon, a currency symbol, a unit. Decorative unless it is text.
suffixReactNodenoneContent after the value: a unit, a Kbd hint, a clear IconButton.
size'sm' | 'md' | 'lg''md'Height follows the density tokens. Default `md`.
hideLabelbooleannoneVisually hide the Field label (still the accessible name). Only with `label`.
onValueChange(value: string) => voidnoneCalled 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.

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

size

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

From the code Generated from the component, not editable here.

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)

    v1.0.0, Nov 11, 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

    v1.0.0, Nov 11, 2026

  • Fix

    Component specs count height and width as the content box (a bordered table cell is its height plus its border), the Figma build draws an empty sized slot at its padding instead of 100px, and stories reach every Figma variant: a disabled control on IconButton, Input, Select, Combobox and Textarea, and Figma variant stories for AccordionItem, MenuItem, MenuCheckboxItem, MenuSubmenu and TableEmpty

    v1.0.0, Nov 11, 2026

  • Fix

    Add usage guidance files for Button, Input, Badge and Card, plus the list of color pairs to check for contrast

    v1.0.0, Nov 11, 2026

  • Fix

    Adds the generated component-specs.json (run npm run specs) for Button, IconButton, Badge, Tag, Input and Card, read by the DS Bridge Figma plugin to pull them as component sets

    v1.0.0, Nov 11, 2026

All release notes

Updated Nov 11, 2026
View source

Generated from 4 files