Skip to content
Cuelark UI
Forms

Field

Label, control, description and error wired with the right aria.

Field wires a label, any control, a description and an error message together with generated ids, aria-describedby and aria-invalid, so every form field is accessible without hand-written attributes.

Preview

@

Your public handle. Letters, numbers and dashes.

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/field.json

The CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/field.

Usage

import { Field, FieldControl, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field";

<Field invalid={!!error}>
  <FieldLabel>Email</FieldLabel>
  <FieldControl><Input /></FieldControl>
  <FieldDescription>We never share it.</FieldDescription>
  <FieldError>{error}</FieldError>
</Field>

API reference

Field

PropTypeDefaultDescription
invalidbooleanfalseShows the error and sets aria-invalid.
orientation"vertical" | "horizontal""vertical"Layout.

FieldControl

Clones its child with id and aria attributes.

FieldLabel · FieldDescription · FieldError

Accessibility

  • The error uses role=alert and is linked via aria-describedby.

FAQ

Also searched as: react form field component · accessible form field · form error message react · shadcn field · input with label and error