Atoms

Field

A full form field system with labels, descriptions, and errors.

FormanceCustom component built for Formance products.

Installation#

npx shadcn@latest add @formance/field

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldSet,
  FieldLegend,
} from '@/components/ui/field'

<Field>
  <FieldLabel>Ledger name</FieldLabel>
  <Input placeholder="my-ledger" />
  <FieldDescription>
    A unique identifier for your ledger instance.
  </FieldDescription>
</Field>

Compound Components

Compose the pieces you need:

<Field />Root wrapper with orientation variants (vertical, horizontal, responsive).

<FieldLabel />Accessible label tied to the field control.

<FieldTitle />Non-label heading for a field (e.g. checkbox groups).

<FieldContent />Wraps the control, description, and error.

<FieldDescription />Helper text below the control.

<FieldError />Validation error message with alert role.

<FieldGroup />Groups multiple fields vertically.

<FieldSet />Semantic fieldset for grouped controls.

<FieldLegend />Legend for a fieldset with legend or label styling.

<FieldSeparator />Horizontal separator between fields, optionally with text.

Command Menu