Component · 02

Input

A flat, ruled field. Only things you can press are raised; things you write into sit in the page. A plain input element underneath, so autofill, forms and mobile keyboards just work.

Default

Always give it a label, either wrapping it or via htmlFor.

tsx

<label>
  Email
  <Input type="email" placeholder="you@example.com" />
</label>

Sizes

tsx

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

Invalid and disabled

Tie the message to the field with aria-describedby so screen readers announce it.

EmailEnter a valid email address.

WorkspaceManaged by your admin.

tsx

<Input invalid aria-describedby="email-error" defaultValue="not-an-email" />
<p id="email-error">Enter a valid email address.</p>

<Input disabled defaultValue="Read only for now" />

Props

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Height and padding. Named size, so it does not collide with the native size attribute.
invalid	boolean	false	Red border and aria-invalid. Pair it with a visible message.
type	string	"text"	Any native input type.

All other props of <input> (including ref) are passed through.