Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt

Use this file to discover all available pages before exploring further.

The Field component provides a complete form field structure with label, input control, description, validation, and error messaging.

​
Installation

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

​
Usage

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

​
Components

​
Field (Root)

​
name
string
Field name for form submission.
​
disabled
boolean
Disable the entire field.
​
validate
function
Custom validation function.

​
FieldLabel

Labels the field control.

​
FieldControl

​
size
string
default:"md"
Size variant from Input component.
​
variant
string
default:"default"
Visual variant from Input component.
The input control styled with Input variants.

​
FieldDescription

Help text for the field.

​
FieldError

Displays validation error messages.

​
FieldValidity

Provides programmatic access to validation state.

​
Examples

​
Complete Field

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

​
With Validation

<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>

​
Disabled Field

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

​
Accessibility

  • Built on @base-ui/react for ARIA support
  • Automatic label association
  • Error announcements to screen readers
  • Proper disabled states
  • Validation feedback