Text Field

A real <label> linked to a real <input>, with aria-describedby wired up to hint and error text automatically.

import { TextField } from "@kernelui/react";

<TextField label="Email address" type="email" />

Props

Accessibility

• Clicking the label focuses the input, that's a native label/input association, not a click handler.
• :user-invalid handles live validation styling after the user has interacted with the field, with no blur-tracking JavaScript.
• The invalid prop is for validation you already know about, like a failed server response, before the user has touched anything.