Text field
A square input with a spark border and ring on focus. A hint says what it takes; an error says what to do, in words as well as the red border.
EmailOnly used for the newsletter.
Controls
Code
import { Field, TextField } from "@/components/ui/kit/forms";
<Field label="Email" hint="Only used for the newsletter.">
<TextField placeholder="name@example.com" />
</Field>Every state
Field · Default
EmailOnly used for the newsletter.
TextField · Error
EmailAdd a domain, like name@example.com.
TextField · Disabled
TextField caret
›
Usage
Tokens it uses
| --paper | … |
|---|---|
| --line-control | … |
| --spark | … |
| --spark-ink | … |
| --ink | … |
| --faint | … |
| --font-body | … |
| --font-label | … |
Values are read live from the stylesheet, so they follow the site theme.
Spec
- Trigger
- Reduced motion