Form Field

Install

Install manually View source on GitHub

Anatomy

FormField
FormFieldLabel
FormFieldTextarea
FormFieldDescription
FormFieldError
FormFieldCount

Accessibility3 checks

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.

Forms and usability

Workspace description (required)

Use at least 10 characters. You can change this later.

68 / 120 characters

Code example

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>  );}

Manual installation

form-field.tsx

Loading component source…