Field

The Field component wraps a label, an input, and optional helper or error text into a single, themed unit. It replaces the old Block component from 9.x and adds first-class support for hint and error states.

Quick Start

To start using the Field component, import it from reablocks.

import { Field, Input } from 'reablocks';


export default function App() {
return (
  <Field label="Email" hint="We'll never share your email.">
    <Input placeholder="you@example.com" />
  </Field>
);
}

import { Field, Input } from 'reablocks';

export default function App() {
return (
  <Field label="Email" hint="We'll never share your email.">
    <Input placeholder="you@example.com" />
  </Field>
);
}

We'll never share your email.

Examples

Label

Hint

A hint displays guidance text below the input:

Error

The error prop accepts a boolean or a ReactNode. When set, it replaces the hint and is rendered with role="alert" so it’s announced by screen readers.

When both hint and error are present, error takes precedence:


<Field
  label="Email"
  error={errors.email?.message ?? false}
>
  <Input />
</Field>

Horizontal layout

Blocks

This component is used in the following Blocks:

Forgot Password Login MFA Profile Register Contact

Theme

This component uses the following default theme:

root{}(11 keys)


interface FieldTheme {
  base: string;
  disableMargin: string;
  label: string;
  hint: string;
  error: string;
  errorState: string;
  centerAlign: string;
  endAlign: string;
  horizontal: {
    base: string;
    label: string;
    content: string;
  };
  vertical: {
    base: string;
    label: string;
  };
}

Learn more about how to customize in the Theme documentation.

API

Name	Type	Default
`label`	`ReactNode` Label to display on the field.
`disableMargin`	`boolean` Disable field bottom margin.
`required`	`boolean` Whether to show the required indicator next to the label.
`requiredIndicator`	`ReactNode` Content to render as the required indicator. Defaults to `*`. The indicator is decorative (`aria-hidden`); set `required`/`aria-required` on the input control for screen readers.
`requiredAnnouncement`	`string` Visually-hidden text announced by assistive tech alongside the required indicator. Defaults to `'required'`. Pass `''` to opt out (e.g. when the input already carries `aria-required`), or a localized string.
`htmlFor`	`string` Sets the label’s `htmlFor`. Pair with a matching `id` on the child form control to associate them. When omitted, no `htmlFor` is rendered.
`children`	`ReactNode` Children to render.
`labelClassName`	`string` Additional classname to apply to the label.
`className`	`string` Additional classname to apply to the field.
`direction`	`"vertical" \| "horizontal"` Direction of the field.	`'vertical'`
`alignment`	`"start" \| "center" \| "end"` Alignment of the label.	`'start'`
`onTitleClick`	`(event: MouseEvent<HTMLLabelElement, MouseEvent>) => void` Event when the label is clicked.
`hint`	`React.ReactNode` Hint text displayed below the input. Hidden when error message is shown.
`error`	`ReactNode` Error state or message. When `true`, applies error styling. When a string or ReactNode, renders the error message below the input.
`theme`	`FieldTheme` Theme for the Field.

Migrating from `Block`

Block was renamed to Field in 10.0.0.


// Before
import { Block } from 'reablocks';
 
<Block label="Email"><Input /></Block>
 
// After
import { Field } from 'reablocks';
 
<Field label="Email"><Input /></Field>

Before	After
`Block`	`Field`
`BlockProps`	`FieldProps`
`BlockTheme`	`FieldTheme`
`blockTheme`	`fieldTheme`
`components.block`	`components.field`

See the full guide in Migration.