# Form Field

> Labels, descriptions, requirements, validation, and character counts.

- Category: Forms
- Kind: component
- Page: https://uaiblocks.dev/components/form-field
- Registry item: https://uaiblocks.dev/r/form-field.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/form-field.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/form-field.json
```

## Usage

```tsx
"use client";

import { useState } from "react";
import {
  FormField,
  FormFieldCount,
  FormFieldDescription,
  FormFieldError,
  FormFieldLabel,
  FormFieldTextarea,
  type FormFieldVariant,
} from "@/components/ui/uai/form-field";

export function FormFieldPreview({ variant = "outlined" }: { variant?: FormFieldVariant }) {
  const [value, setValue] = useState(
    "Where the growth team plans launches and tracks pricing experiments.",
  );
  const [touched, setTouched] = useState(false);
  return (
    <FormField
      variant={variant}
      value={value}
      onValueChange={setValue}
      required
      maxLength={120}
      invalid={touched && value.trim().length < 10}
    >
      <FormFieldLabel>Workspace description</FormFieldLabel>
      <FormFieldTextarea
        name="description"
        onBlur={() => setTouched(true)}
        placeholder="What will your team work on?"
      />
      <FormFieldDescription>
        Use at least 10 characters. You can change this later.
      </FormFieldDescription>
      <FormFieldError>Enter a description with at least 10 characters.</FormFieldError>
      <FormFieldCount />
    </FormField>
  );
}
```

## Anatomy

- `FormField`
  - `FormFieldLabel`
  - `FormFieldTextarea`
  - `FormFieldDescription`
  - `FormFieldError`
  - `FormFieldCount`

## Accessibility

- Label, required state, description, error, and count are connected to the native input or textarea.
- The root owns the string value; use one input or textarea per field. Validation remains consumer-owned.
- Pass inputId on the root to connect external summaries. Mount optional descriptions and errors only when relevant.