Field

Installation

npx nuecrea-ui add field

Usage

import * as Field from '@/components/ui/field';
import { Input } from '@/components/ui/input';

export default function FieldStory() {
  return (
    <main className="grid max-w-sm gap-6">
      <Field.Root validationMode="onBlur">
        <Field.Label>Email</Field.Label>
        <Input type="email" required placeholder="you@example.com" />
        <Field.Description>
          We only use this for receipts.
        </Field.Description>
        <Field.Error match="valueMissing">
          Enter your email.
        </Field.Error>
        <Field.Error match="typeMismatch">
          Enter a valid email address.
        </Field.Error>
      </Field.Root>
      <Field.Root disabled>
        <Field.Label>Workspace</Field.Label>
        <Input defaultValue="Nuecrea" />
        <Field.Description>Managed by your admin.</Field.Description>
      </Field.Root>
    </main>
  );
}

API reference