Field

import {
  Field,
  FieldLabel,
  FieldControl,
  FieldDescription,
  FieldError,
  FieldValidity,
} from "@craftdotui/baseui/components/field";

<Field>
  <FieldLabel>Email</FieldLabel>
  <FieldControl type="email" placeholder="you@example.com" />
  <FieldDescription>We'll never share your email.</FieldDescription>
  <FieldError />
</Field>

<Field>
  <FieldLabel>Username</FieldLabel>
  <FieldControl placeholder="Enter username" />
  <FieldDescription>Choose a unique username.</FieldDescription>
  <FieldError />
</Field>

<Field
  validate={(value) => {
    if (!value) return 'Email is required';
    if (!value.includes('@')) return 'Invalid email';
    return null;
  }}
>
  <FieldLabel>Email</FieldLabel>
  <FieldControl type="email" />
  <FieldError />
</Field>

<Field disabled>
  <FieldLabel>Disabled Field</FieldLabel>
  <FieldControl value="Cannot edit" />
</Field>