Forms · Sections

Sections and repeating groups

A long form is a document: sections with real headings, fieldsets for the questions that need one, and repeating rows with add, remove and reorder. The chrome is LUC's; the array lives in your state — or in `useFieldArray`.

import { FieldArray, FormSection } from "@luc/ui";

Examples

A sectioned settings form

Tabs switch sections without pretending to be navigation: the form is one surface, and each tab is a Chapter of it.

<Form onSubmit={save}>
  <SegmentedControl value={tab} onValueChange={setTab}>
    <SegmentedItem value="profile">Profile</SegmentedItem>
    <SegmentedItem value="delivery">Delivery</SegmentedItem>
    <SegmentedItem value="security">Security</SegmentedItem>
  </SegmentedControl>

  <FormSection title="Profile" columns={2}>…</FormSection>
</Form>

Density without losing touch targets

A form can be dense; it must not be small. Compact spacing changes the gap between rows, never the size of a control.

Symbol

Weight

Cap

<div data-density="compact" className="grid gap-3 md:grid-cols-3">
  <Field label="Symbol"><Input size="sm" defaultValue="BTC-USD" /></Field>
  <Field label="Weight"><Input size="sm" defaultValue="4.5%" /></Field>
  <Field label="Cap"><Input size="sm" defaultValue="250000" /></Field>
</div>

Usage

import { FieldArray, FormSection } from "@luc/ui/forms";

<FormSection title="Universe" description="Which instruments are in scope." columns={2}>
  <Field label="Sector">
    <Input defaultValue="Technology" />
  </Field>
</FormSection>

A section is a heading and a description; the fields inside own their own labels, and the grid collapses to one column on a narrow screen.

API

This page shows components working together rather than exporting one of its own, so the props live on the pages below — each link opens that page's API table.

Formform
FieldArraysections
Inputinput