TextField v0.1.0 Forms

Labeled text input with description and error messaging, all wired with aria-describedby automatically.

import { TextField } from "latticeui-react";

Examples

With description

We never share your email.

Show code

<TextField
  label="Email"
  type="email"
  placeholder="you@example.com"
  description="We never share your email."
/>

Validation error

Pass error to mark the field invalid; it is announced via role=alert and aria-describedby.

Username

Show code

const [value, setValue] = useState("");

<TextField
  label="Username"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  error={value && value.length < 3 ? "Must be at least 3 characters" : undefined}
/>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="text-field"][data-part="root"]`
`label`	`label`	`[data-scope="text-field"][data-part="label"]`
`input`	`input`	`[data-scope="text-field"][data-part="input"]`
`description`	`p`	`[data-scope="text-field"][data-part="description"]`
`error`role=alert when present	`p`	`[data-scope="text-field"][data-part="error"]`

Props

Prop	Type	Default	Description
`label` *	`string`	—
`description`	`string`	—	Helper text linked via aria-describedby.
`error`	`string`	—	Marks the field invalid and announces via role=alert.
`...rest`	`React.InputHTMLAttributes<HTMLInputElement>`	—

Accessibility

Roles: textbox (native input)

label is always required - there is no unlabeled variant.
error sets aria-invalid and data-invalid.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="text-field"][data-part="input"] {
  /* your overrides */
}

State attributes: data-invalid