Form

Every Flab form control composed into one layout. Field wires a label, description and validation to a control with the correct ARIA relationships; Label handles the controls that sit outside a Field. Each control also has its own page in this section.

<form className="space-y-5">  <Field>    <FieldLabel>Full name</FieldLabel>    <FieldControl render={<Input placeholder="Ada Okafor" />} />  </Field>
  <div className="space-y-1.5">    <Label htmlFor="role">Role</Label>    <Select items={roles} defaultValue="member">      <SelectTrigger id="role"><SelectValue /></SelectTrigger>      <SelectContent>        <SelectItem value="owner">Owner</SelectItem>        <SelectItem value="admin">Admin</SelectItem>        <SelectItem value="member">Member</SelectItem>        <SelectItem value="viewer">Viewer</SelectItem>      </SelectContent>    </Select>  </div>
  <div className="space-y-1.5">    <Label htmlFor="regions">Regions</Label>    <MultiSelect id="regions" options={regions} defaultValue={['na']} placeholder="Select regions" />  </div>
  <Field>    <FieldLabel>Bio</FieldLabel>    <FieldControl render={<Textarea autoResize placeholder="A short bio" />} />    <FieldDescription>Shown on your public profile.</FieldDescription>  </Field>
  <div className="space-y-2">    <span className="text-body-sm font-medium text-primary">Billing</span>    <RadioGroup aria-label="Billing" defaultValue="card">      <label className="flex items-center gap-2"><Radio value="card" /> Pay by card</label>      <label className="flex items-center gap-2"><Radio value="invoice" /> Send an invoice</label>    </RadioGroup>  </div>
  <label className="flex items-center gap-2"><Checkbox /> I agree to the terms</label>  <label className="flex items-center gap-3"><Switch /> Email me product updates</label>
  <div className="flex gap-2 pt-1">    <Button variant="primary">Create account</Button>    <Button variant="secondary">Cancel</Button>  </div></form>