Field

Overview

Use Field to wrap a form control with a label, description, validation message, and disabled or invalid state.

Field keeps form layout consistent and helps connect supporting text to the control.

Anatomy

A field usually includes a label, control, description, and error message. The control can be an input, textarea, select, checkbox, radio group, slider, switch, combobox, or custom form element.

Behavior

Use required, disabled, invalid, and validity states to match the real form state. Keep validation messages close to the control they explain.

Accessibility

Field is most useful when it connects labels, descriptions, and errors in a way screen readers can understand. Use clear labels and specific error messages.

Installation

npx love-ui@latest add field

Usage

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

<Field>
  <FieldLabel>Name</FieldLabel>
  <FieldControl type="text" placeholder="Enter your name" />
  <FieldDescription>Visible on your profile</FieldDescription>
  <FieldError>Please enter a valid name</FieldError>
  <FieldValidity>
    {(validity) => (
      {validity.error && <p>{validity.error}</p>}
    )}
  </FieldValidity>
</Field>

Examples

The examples show Field with required, disabled, error, validity, and many different form controls.

Required Field

Disabled Field

With Error

Enter an invalid email address and press enter to see the error.

With Validity

{
  "state": {
    "badInput": false,
    "customError": false,
    "patternMismatch": false,
    "rangeOverflow": false,
    "rangeUnderflow": false,
    "stepMismatch": false,
    "tooLong": false,
    "tooShort": false,
    "typeMismatch": false,
    "valid": null,
    "valueMissing": false
  },
  "error": "",
  "errors": [],
  "value": null,
  "initialValue": null,
  "validity": {
    "badInput": false,
    "customError": false,
    "patternMismatch": false,
    "rangeOverflow": false,
    "rangeUnderflow": false,
    "stepMismatch": false,
    "tooLong": false,
    "tooShort": false,
    "typeMismatch": false,
    "valid": null,
    "valueMissing": false
  }
}

Autocomplete Field

Combobox Field

Combobox Multiple Field

Textarea Field

Select Field

Checkbox Field

Checkbox Group Field

Radio Group Field

Switch Field

Slider Field

Number Field

Complete Form Example