Input
An Input allows users to enter one line of text, such as a name, an email address, or an amount.
When to Use
- for a value that fits on one line: a name, an email address, or an amount
- for a form of one value, with a Button next to it, such as “Send invite”
- to choose a file from the device, with
type="file"
When Not to Use
- for text that is longer than one line (use a Textarea)
- for an icon, a unit, or a Button inside the edge (use an Input Group)
- for a one-time passcode (use an Input OTP)
- to choose from a list (use a Select)
- to filter a list by typing (use a Combobox)
Behavior
An Input is 32px tall for every type and has no other height, so use the default size for a Button next to it. By default, the Input fills the width of its container. See Sizing for the rule that the width is set on the column, not on the Input.
Content
| String | Rule | Example | Counterexample |
|---|---|---|---|
| Placeholder | Show a sample value, not the name | “name@example.com” | “Email” |
The HTML Standard says that a placeholder isn’t an alternative to a label. A label is always visible, and a placeholder disappears when users enter a value.
Accessibility
An Input renders a native input element through Base UI’s Input, so the browser provides its role and its keys. Input doesn’t show a message when its value is invalid; to show the error, use a Field.
FieldLabel, connect a Label to its id with htmlFor, or set aria-label.An Input that collects a detail about the user needs autoComplete so that browsers and assistive technology can
identify the purpose of the field, as WCAG 2.2 SC 1.3.5 Identify Input Purpose requires. For the lines of an address, use
street-address, address-level2, and postal-code.
Installation
npx shadcn@latest add @summit/inputUsage
import { Input } from '@/components/ui/input';
<Input type="email" placeholder="name@example.com" aria-label="Email" />;With a Button
To place a Button next to an Input, put both in a flex row. The Input fills the width that remains.
import { Button } from '@/components/ui/button';
<div className="flex gap-2">
<Input type="email" aria-label="Email" />
<Button>Send invite</Button>
</div>;API Reference
Input adds no props. Its props are passed to Base UI’s Input, which accepts the props of an input element. See the Base UI Input documentation for data-disabled and the other data attributes that it sets.