PrimitiveAvailable

Field

Form composition for visible labels, help, and error messages.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/field.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';

export default function Demo() {
  return (
    <FieldGroup className="max-w-md">
      <Field>
        <FieldLabel htmlFor="project-name">Project name</FieldLabel>
        <Input id="project-name" placeholder="My workspace" />
        <FieldDescription>Use a name your team can recognize.</FieldDescription>
      </Field>
      <Field data-invalid>
        <FieldLabel htmlFor="project-email">Contact email</FieldLabel>
        <Input
          id="project-email"
          defaultValue="invalid-email"
          aria-invalid
          aria-describedby="project-email-error"
        />
        <FieldError id="project-email-error">
          Enter a valid email address.
        </FieldError>
      </Field>
    </FieldGroup>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Rest, filled, focus, invalid and disabled. Invalid fields use aria-invalid and an associated message, not color alone.
Hover never validates a field. The application decides when to show errors.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
orientation	vertical / horizontal / responsive	vertical	Label and control arrangement.

Accessibility

Rules that should remain intact when adapting the component to a product.

Connect help and error text through aria-describedby and expose invalid state on the actual control.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.