Field

The Field component set provides a suite of components for building form fields with consistent styling, labels, error handling, and inset content. These components are built on top of the @base-ui-components/react Field primitive.

Description

The root component that wraps the form field elements.

Usage

import { Field, FieldLabel } from "@crafted-ui/react";

<Field>
  <FieldLabel>Username</FieldLabel>
  <input 
    type="text" 
    className="w-full rounded-md border border-neutral-300 px-3 py-1.5 text-sm shadow-sm" 
  />
</Field>

Props

The Field component accepts all props from the @base-ui-components/react Field.Root component, plus:

Description

A label component for the form field.

Example

Usage

import { Field, FieldLabel } from "@crafted-ui/react";

<Field>
  <FieldLabel>Email</FieldLabel>
  <input 
    type="email" 
    className="w-full rounded-md border border-neutral-300 px-3 py-1.5 text-sm shadow-sm" 
  />
</Field>

Props

The FieldLabel component accepts all props from the @base-ui-components/react Field.Label component, plus:

Description

Displays validation error messages. This is automatically included in the Field component.

Example

Usage

import { Field, FieldLabel, FieldError } from "@crafted-ui/react";

<Field>
  <FieldLabel>Password</FieldLabel>
  <input 
    type="password" 
    className="w-full rounded-md border border-neutral-300 px-3 py-1.5 text-sm shadow-sm" 
  />
  <FieldError>Password must be at least 8 characters</FieldError>
</Field>

Props

The FieldError component accepts all props from the @base-ui-components/react Field.Error component, plus:

Description

Adds inset content to the input field, such as units or extra information.

Example

<Field>
  <FieldLabel>Amount</FieldLabel>
  <div className="relative">
    <input 
      type="number" 
      className="w-full rounded-md border border-neutral-300 px-3 py-1.5 text-sm shadow-sm" 
    />
    <FieldInset text="USD" position="right" />
  </div>
</Field>

Usage with Text

import { Field, FieldLabel, FieldInset } from "@crafted-ui/react";

<Field>
  <FieldLabel>Price</FieldLabel>
  <div className="relative">
    <input 
      type="number" 
      className="w-full rounded-md border border-neutral-300 px-3 py-1.5 text-sm shadow-sm" 
    />
    <FieldInset text="$" position="left" />
  </div>
</Field>

Usage with Custom Content

import { Field, FieldLabel, FieldInset } from "@crafted-ui/react";

<Field>
  <FieldLabel>Search</FieldLabel>
  <div className="relative">
    <input 
      type="text" 
      className="w-full rounded-md border border-neutral-300 px-3 py-1.5 text-sm shadow-sm" 
    />
    <FieldInset position="right">
      <svg className="h-4 w-4 text-neutral-500" /* SVG properties */ />
    </FieldInset>
  </div>
</Field>

Props