Skip to main content

Text Input

Accessible labeled input with required marker, hints, errors (role=alert), prefix/suffix, and full native input props.

Default

Email (required)

We use this for receipts and login links.

Optional

Nickname(Optional)

Prefix & suffix

Website

https://

Price

USD

Error

Username

That username is already in use.

Disabled & read-only

Invite code

Account ID

Loading

Loading field

Loading field

API

Prop	Required	Type	Default	Description
theme	Optional	SiteTheme	atelier	Visual theme for the field group.
mode	Optional	"light" \| "dark"	light	Color mode — swaps token palette for light or dark surfaces.
label	Optional	string	—	Visible label linked via htmlFor.
required	Optional	boolean	—	Shows required marker + aria-required.
hint	Optional	string	—	Helper text linked via aria-describedby.
error	Optional	string	—	Validation message; aria-invalid + role=alert.
prefix / suffix	Optional	ReactNode	—	Inline affixes (e.g. https://, .com).
name, value, onChange, onBlur	Optional	native input	—	Standard controlled/uncontrolled form wiring.
type, autoComplete, inputMode, pattern	Optional	native input	—	Pass through for email, tel, password, etc.
readOnly, disabled, maxLength	Optional	native input	—	Native states with visible styling.
TextInputSkeleton	Optional	component	—	Colocated loading preset — label, control, optional hint bars.