Text input

TextInput is the workhorse single-line input. It renders a real <input> and supports any HTML input type (text, email, search, url, tel, number, etc.). For multi-line, use TextArea. For passwords specifically, use PasswordInput — it adds the show/hide toggle.

Use it for

• Any single-line text entry (name, email, search, URL, phone, number)
• Inline form fields with labels, helpers, and error states
• Search bars (use type="search" + iconBefore — no separate SearchInput component)
• Email fields (use type="email" + autoComplete="email" + envelope icon)

Import

import { TextInput } from '@brikdesigns/bds';

Variants

Sizes

• sm — 14px text. Compact forms, dense table-row editing.
• md — 16px text. Default for most product UI.
• lg — 18px text. Prominent inputs, marketing forms, hero search.

With label and helper

<TextInput
  label="Email"
  type="email"
  placeholder="you@example.com"
  helperText="We'll never share your email"
  fullWidth
/>

Error state

<TextInput
  label="Email"
  type="email"
  error="Please enter a valid email address"
  fullWidth
/>

With icons

iconBefore for leading icons (search, email, location), iconAfter for trailing affordances.

<TextInput
  label="Search"
  type="search"
  placeholder="Search..."
  iconBefore={<MagnifyingGlassIcon />}
/>

Email, search, URL — no wrapper components

The previous EmailInput and SearchInput wrappers were removed per ADR-004. They were 5–10 line shims that only set type= and a leading icon. Use TextInput directly:

// Email — replaces <EmailInput />
<TextInput
  label="Email"
  type="email"
  autoComplete="email"
  iconBefore={<Icon icon="ph:envelope" />}
  placeholder="you@example.com"
/>

// Search — replaces <SearchInput />
// type="search" automatically renders the native clear button (BDS-styled).
<TextInput
  type="search"
  iconBefore={<Icon icon="ph:magnifying-glass" />}
  placeholder="Search..."
/>

When not to use

• Don't use TextInput for passwords. Use PasswordInput — the show/hide toggle is real, load-bearing UX.
• Don't use TextInput for multi-line. Use TextArea.
• Don't use TextInput for known-set choices. If users pick from a known list, use Select (single) or MultiSelect (multi).

Accessibility

• Renders a real <input> — keyboard, focus ring, autofill, password manager hooks all platform-native.
• label auto-wires htmlFor/id. If you don't pass label, supply aria-label or wrap in your own <label>.
• error sets aria-invalid and links the message via aria-describedby.

API

Plus all standard <input> HTML attributes (excluding the size HTML attribute, which TextInput overrides for the size variant).

CSS Override API

.high-contrast-form {
  --text-input-focus-ring-width: 2px;
}

Related

• TextArea — multi-line sibling
• PasswordInput — adds show/hide toggle
• AddressInput — adds autocomplete suggestions
• Field — wrapper for label/helper/error layout
• Storybook playground