104Get started
HextaUI

Field: Validation

Native constraints like required and minLength are checked on blur. Give each <FieldError /> a match to word the message per problem. An empty required field is only flagged after it has been edited, so tabbing past it doesn’t shout.

At least 8 characters.

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldValidation() {
  return (
    <Field validationMode="onBlur" className="max-w-sm">
      <FieldLabel>Password</FieldLabel>
      <Input
        type="password"
        autoComplete="new-password"
        required
        minLength={8}
      />
      <FieldDescription>At least 8 characters.</FieldDescription>
      <FieldError match="valueMissing">Choose a password.</FieldError>
      <FieldError match="tooShort">
        That’s too short. Use 8 or more characters.
      </FieldError>
    </Field>
  )
}

Add this example

This adds the example as components/examples/field/validation.tsx, together with the Field component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/field-validation.json

To add only the component, follow the Field installation.

Props in this example

The Field props this example sets, from the API reference.

Field

PropTypeDefault
validationMode
"onSubmit" | "onBlur" | "onChange""onSubmit"

FieldError

PropTypeDefault
matchShow only for this validity problem. true always shows it.
boolean | "valueMissing" | "typeMismatch" | "tooShort" | "tooLong" | "patternMismatch" | "rangeOverflow" | "rangeUnderflow" | "stepMismatch" | "badInput" | "customError" | "valid"–

Every prop is in the Field API reference.

More Field examples

See them all, with keyboard support and accessibility notes, on the Field page.

Related components