Component

Field

Field creates stable IDs for its label, description, and error. Set description and error when those parts are rendered; FieldControl passes the relationships to its single native control child.

Preview

Use your work address.

Enter a valid email address.

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add field

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Field, FieldLabel, FieldControl, FieldDescription, FieldError, Input } from '@nimjs/ui';

export function Example() {
  return (
    <Field description error invalid>
      <FieldLabel>Email</FieldLabel>
      <FieldControl><Input type="email" /></FieldControl>
      <FieldDescription>Work email</FieldDescription>
      <FieldError>Enter a valid address.</FieldError>
    </Field>
  );
}

System metadata

Registry

field

Category: forms

Status: preview

Version marker: 0.0.0 (unreleased)

Files

field.tsx

Tokens

foregroundmuted-foregrounddestructive

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

focus visiblekeyboard accessiblenative semanticsscreen reader readable

Anatomy

Field

Field part of the field component.

FieldLabel

FieldLabel part of the field component.

FieldControl

FieldControl part of the field component.

FieldDescription

FieldDescription part of the field component.

FieldError

FieldError part of the field component.

Usage patterns

basic use

Wrap one control; set description and error when those parts render.

API and states

Field creates stable IDs for its label, description, and error. Set description and error when those parts are rendered; FieldControl passes the relationships to its single native control child.

Accessibility

The control keeps its native keyboard behavior. Field adds aria-describedby and aria-invalid without replacing the control semantics.