Field

Arrange labels and messages freely. Your app owns validation; Field connects the result to the control.

$ npx @beaket/ui add field

Used only for account notifications.

Source

"use client";

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

export default function Example() {
  return (
    <Field label="Email" hint="Used only for account notifications." className="max-w-sm">
      {(id) => <Input id={id} type="email" placeholder="you@example.com" />}
    </Field>
  );
}

Examples

All States

Used only for account notifications.

Enter a valid email address.

Account ID

This value cannot be changed.

Source

"use client";

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

export default function Example() {
  return (
    <div className="max-w-sm space-y-8">
      <Field invalid>
        <Field.Label>Email</Field.Label>
        <Field.Control>
          <Input type="email" defaultValue="not-an-email" />
        </Field.Control>
        <div className="space-y-1">
          <Field.Hint>Used only for account notifications.</Field.Hint>
          <Field.Error>Enter a valid email address.</Field.Error>
        </div>
      </Field>
      <Field label="Account ID" hint="This value cannot be changed.">
        {(id) => <Input id={id} readOnly defaultValue="account_42" />}
      </Field>
    </div>
  );
}

Props

Name	Type	Default	Description
asChild	boolean \| undefined	—	—
controlId	string \| undefined	—	ID for the control and its label, not the root container. Set custom IDs here rather than on the slotted control.
invalid	boolean \| undefined	—	Validation belongs to the app; this only announces and displays its result.
label	ReactNode	—	Optional sugar over Label, Control, Hint and Error.
hint	ReactNode	—	—
error	ReactNode	—	—
Label.asChild	boolean	—	—
Hint.asChild	boolean	—	—
Error.asChild	boolean	—	—