Patterns/Forms & fields

Forms & fields

Stack FieldGroup → Field → label, optional description, then control. Controls use dashboard-sized Input (see component docs).

Example

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

<FieldGroup className="max-w-md space-y-4">
  <Field>
    <FieldLabel htmlFor="email">Work email</FieldLabel>
    <FieldDescription>Used for receipts and alerts.</FieldDescription>
    <Input id="email" type="email" placeholder="you@company.com" />
  </Field>
  <div className="flex justify-end gap-2 pt-2">
    <Button variant="outline" size="md">Cancel</Button>
    <Button variant="primary" size="md">Save</Button>
  </div>
</FieldGroup>