FRȘah Design System

Form patterns

Form layouts compose shadcn inputs with Field, FieldGroup, and Card sections. Individual controls are documented on the Inputs page. Production forms use react-hook-form via @/components/HookForm.

<FieldGroup className="grid gap-4 md:grid-cols-2">
  <Field>
    <FieldLabel htmlFor="county">County</FieldLabel>
    <Select>...</Select>
  </Field>
</FieldGroup>

Layouts

Common form structures for auth, settings, and registry pages.

Stacked form

<form className="space-y-4">
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" />
    </Field>
    <Field>
      <FieldLabel htmlFor="password">Password</FieldLabel>
      <Input id="password" type="password" />
    </Field>
    <Button className="w-full">Sign in</Button>
  </FieldGroup>
</form>

Identification details

Official club registry information.

Section card

<Card>
  <CardHeader>
    <CardTitle>Identification details</CardTitle>
    <CardDescription>Official club registry information.</CardDescription>
  </CardHeader>
  <CardContent>
    <FieldGroup className="grid gap-4 md:grid-cols-2">...</FieldGroup>
  </CardContent>
</Card>

Two-column grid

<FieldGroup className="grid gap-4 md:grid-cols-2">
  <Field>...</Field>
  <Field>...</Field>
</FieldGroup>

Public page settings

Control how the club appears on the public registry.

Actions footer

<CardFooter className="justify-end gap-2 border-t">
  <Button variant="outline">Cancel</Button>
  <Button>Save changes</Button>
</CardFooter>

Patterns

Filter bars, grouped fields, and multi-panel enrollment flows.

Filter bar

<div className="flex flex-col gap-3 sm:flex-row sm:items-end">
  <Field className="flex-1">...</Field>
  <Button>Apply filters</Button>
</div>

Contact details

Field set

<FieldSet>
  <FieldLegend>Contact details</FieldLegend>
  <FieldGroup className="grid gap-4 md:grid-cols-2">...</FieldGroup>
</FieldSet>

Enrollment details

Select the event and club member.

Event summary

Event

Spring Open 2026

Format

Rapid — 9 rounds

Dates

12.04 – 14.04.2026

Enrollment layout

<div className="grid gap-6 xl:grid-cols-3">
  <div className="space-y-6 xl:col-span-2">...</div>
  <Card>Summary panel</Card>
</div>