Forms Input

Input

One line of text: a name, a place, an email. Pair it with a Label.

Preview

tsx

import { Input, Label } from "zostel-ui";

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="you@example.com" />

Prop	Type	Default	Description
`type`	`string`	`"text"`	Any HTML input type: text, email, tel, number, search…
`placeholder`	`string`	—	A hint, in the brand voice ("Where to?").
`disabled`	`boolean`	`false`	Greys it out.
`…`	`InputHTMLAttributes`	—	Every other <input> attribute; the ref goes to the <input>.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

type

Type: string

Default: "text"

Any HTML input type: text, email, tel, number, search…

placeholder

Type: string

Default: —

A hint, in the brand voice ("Where to?").

disabled

Type: boolean

Default: false

Greys it out.

…

Type: InputHTMLAttributes

Default: —

Every other <input> attribute; the ref goes to the <input>.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).