Input

Text field in the iOS filled look (default), outlined, on a surface, or plain for a field inside an inset grouped row. Adornments hold icons, units or buttons.

import { Input } from "pleate/input";

Variants and states

First name

Last name

Phone

Adornments

per night

Sizes

Text stays at 16px on phones so mobile Safari never zooms in on focus.

Props

variant

Field look; plain has no box, for grouped rows.

"filled" | "outline" | "surface" | "plain"default "filled"

size

Height, padding and type size.

"xs" | "sm" | "md" | "lg" | "xl"default "md"

startAdornment / endAdornment

Content before and after the text.

ReactNode

invalid

Red edge and aria-invalid.

boolean

className / inputClassName

Field box / the <input> itself (the ref points at the input).

string