Text Field
A real <label> linked to a real <input>, with aria-describedby wired up to hint and error text automatically.
Enter a valid email address.
Playground
Toggle every adjustable prop and watch the component — and the code — update live.
We'll never share your email.
Unstyled
Same component — Kernel look stripped. See Platforms.
type
size
invalid
required
disabled
hide label
label offset
Usage
<TextField label="Email" placeholder="you@example.com" type="email" description="We'll never share your email." errorMessage="Enter a valid email address." /><kernel-text-field label="Email" placeholder="you@example.com" type="email" description="We'll never share your email." error-message="Enter a valid email address."></kernel-text-field>Props
| Prop | Type | Default |
|---|---|---|
label | ReactNode (required) | — |
hideLabel | boolean | false |
description | ReactNode | — |
errorMessage | ReactNode | — |
invalid | boolean | false |
size | "sm" | "md" | "lg" | "md" |
className | string | (state) => string — control | — |
wrapperClassName | string | (state) => string | — |
labelClassName | string | (state) => string | — |
descriptionClassName | string | (state) => string | — |
errorClassName | string | (state) => string | — |
Floating labels
The wrapper exposes data-focused and data-filled(and the same flags in className state callbacks) so unstyled consumers can animate floating labels for controlled values, uncontrolled values,defaultValue, user input, and browser autofill where practical.
Accessibility
- Clicking the label focuses the input, that's a native label/input association, not a click handler.
:user-invalidhandles live validation styling after the user has interacted with the field, with no blur-tracking JavaScript.- The
invalidprop is for validation you already know about, like a failed server response, before the user has touched anything.