Form

Input

Single-line text input with three sizes, invalid state and optional start/end adornments. The forwarded ref points at the inner <input>.

Import

import { Input } from "@zephora/react";

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

Render icons or text before/after the input with `startAdornment` / `endAdornment`.

$USD

<Input startAdornment={<SearchIcon />} placeholder="Search…" />
<Input startAdornment="$" endAdornment="USD" placeholder="0.00" />

`invalid` sets aria-invalid and error styling.

<Input invalid defaultValue="not-an-email" />
<Input disabled placeholder="Disabled" />

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control height / typography scale.
`invalid`	`boolean`	`false`	Marks the field invalid: sets aria-invalid and error styling.
`startAdornment`	`ReactNode`	—	Element rendered before the input (icon, prefix…).
`endAdornment`	`ReactNode`	—	Element rendered after the input (icon, suffix…).
`fullWidth`	`boolean`	`false`	Stretches the field to the container width.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`Omit<InputHTMLAttributes<HTMLInputElement>, "size">`	—	All native input props (value, onChange, type, placeholder…) are forwarded.