Text input

Single-line free-form text. Aligned with J&J DS v1.2 (Figma 12054:14516). Wrap in a Field for label, helper text, validation message, required marker, and status. For long inputs use Textarea; for passwords use PasswordInput.

Sizes

32 / 40 / 48 px tall.

Show source

<TextInput size="sm" placeholder="Small" />
<TextInput size="md" placeholder="Medium" />
<TextInput size="lg" placeholder="Large" />

With Field — label + optional helper text

Wrap the input in <Field> to render a label and optional description (helper text). The Field also provides aria-describedby wiring.

Full name

We'll only contact you for account changes.

Show source

<Field label="Full name">
  <TextInput placeholder="Ada Lovelace" />
</Field>
<Field label="Email" description="We'll only contact you for account changes.">
  <TextInput type="email" placeholder="ada@jnj.com" />
</Field>

Required + with input

Pass `required` on the Field for the asterisk + aria-required wiring.

Username

Display name

Visible to your team

Show source

<Field label="Username" required>
  <TextInput defaultValue="ada.lovelace" />
</Field>

Error and warning states

Set Field's `status` to error or warning and pass a `message` to render the colored validation text.

Enter a valid J&J address

Username

This name is taken — try another

Show source

<Field label="Email" status="error" message="Enter a valid J&J address">
  <TextInput defaultValue="not-an-email" />
</Field>
<Field label="Username" status="warning" message="This name is taken — try another">
  <TextInput defaultValue="admin" />
</Field>

Disabled and read-only

`disabled` blocks all interaction (and styles the input). `readOnly` allows focus and copy but not edit.

Account ID

Created on

Show source

<Field label="Account ID" disabled>
  <TextInput defaultValue="ACC-19238" />
</Field>
<Field label="Created on">
  <TextInput readOnly defaultValue="2026-04-01 09:30 UTC" />
</Field>

With leading and trailing icons

`iconStart` and `iconEnd` slot any ReactNode — typically an Icon. They sit inside the underline and inherit the inactive/active border color.

Show source

<TextInput iconStart={<Icon icon={Mail} size="sm" />} placeholder="Email" />
<TextInput iconStart={<Icon icon={Search} size="sm" />} placeholder="Search" />