Field

Form layout primitives: Field, FieldLabel, FieldError, FieldGroup, FieldSet.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview
Billing

As on your bank account.

Compact legend variant
Or

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import {
  Field,
  FieldLabel,
  FieldGroup,
  FieldDescription,
  FieldError,
  Input,
} from "@payglocal_ui/flux-ui";

Example

<FieldGroup className="max-w-sm">
  <Field>
    <FieldLabel htmlFor="email">Email</FieldLabel>
    <FieldDescription>We will never share your email.</FieldDescription>
    <Input id="email" type="email" />
    <FieldError>Invalid email</FieldError>
  </Field>
</FieldGroup>