Field

Form field wrapper with label, hint text, error state, required indicator, and horizontal/vertical layout. Use to wrap any form input.

Import

import { Field } from 'reablocks';

Field Props

Also accepts all standard <section> HTML attributes.

Basic Usage

<Field label="Username">
  <Input placeholder="Enter username" />
</Field>

With Hint

<Field label="Email" hint="We'll never share your email">
  <Input type="email" />
</Field>

With Error

<Field label="Password" error="Password must be at least 8 characters">
  <Input type="password" error />
</Field>

Required

<Field label="Name" required>
  <Input />
</Field>

Horizontal Layout

<Field label="Status" direction="horizontal">
  <Toggle checked={active} onChange={setActive} />
</Field>

FieldTheme Interface

interface FieldTheme {
  base: string;          // Container (mb-2.5)
  disableMargin: string;
  label: string;         // Label (text-sm)
  centerAlign: string;
  endAlign: string;
  horizontal: {
    base: string;        // Flex row, items-baseline
    label: string;       // Right margin, nowrap
    content: string;     // flex-1, min-w-0
  };
  vertical: {
    base: string;        // Block
    label: string;       // Block, mb-0.5
  };
  hint: string;          // Hint text (text-xs, text-secondary, mt-1)
  error: string;         // Error text (text-xs, text-error, mt-1)
  errorState: string;    // Error state on container
}