Field

A field group built on Ark UI Field. The convenience <Field /> wraps a single text FieldInput with optional helperText and errorText. For text areas or full control over structure, use FieldRoot with FieldLabel, FieldTextarea, FieldHelperText, and FieldErrorText.

import { Field } from "@/components/ui/field";

export default function Example() {
  return (
    <Field
      label="Email"
      helperText="We'll only use this for account notifications."
      inputProps={{ placeholder: "you@example.com", type: "email" }}
    />
  );
}

Installation

liminal add field

Usage

Pass inputProps to configure the native input (type, placeholder, aria-invalid, name, etc.). helperText and errorText are optional; when both apply, follow your design system for whether to show helper text alongside errors.

import { Field } from "@/components/ui/field";

export default function Example() {
  return (
    <Field
      label="Email"
      errorText="Please enter a valid email address."
      inputProps={{
        type: "email",
        placeholder: "you@example.com",
        "aria-invalid": true,
      }}
    />
  );
}

Examples

Compound API (textarea)

The convenience Field only wraps FieldInput. For a textarea, compose FieldRoot, FieldLabel, FieldTextarea, FieldHelperText, and FieldErrorText.

import {
  FieldRoot,
  FieldLabel,
  FieldTextarea,
  FieldHelperText,
} from "@/components/ui/field";

export default function Example() {
  return (
    <FieldRoot>
      <FieldLabel>Bio</FieldLabel>
      <FieldTextarea placeholder="Tell us about yourself" rows={4} />
      <FieldHelperText>Max 500 characters.</FieldHelperText>
    </FieldRoot>
  );
}

API

Field forwards additional props to FieldRoot (Ark Field.Root). See Ark Field.