Forms

Field

A label, one control, a hint and an error, wired together for screen readers.

import { Field } from "@flinbu/seed";

Hint, error, optional and required

Workspace name

Shown to your team and clients.

Enter an email like name@company.com.

WebsiteOptional

Notes

Markdown works.

import { Field, Input, Textarea } from "@flinbu/seed";

<div className="grid w-full max-w-xl grid-cols-1 gap-base sm:grid-cols-2">
  <Field label="Workspace name" hint="Shown to your team and clients." required>
    <Input defaultValue="flinbu" />
  </Field>
  <Field label="Email" error="Enter an email like name@company.com.">
    <Input type="email" defaultValue="ana@" />
  </Field>
  <Field label="Website" labelAside="Optional">
    <Input placeholder="https://" />
  </Field>
  <Field label="Notes" hint="Markdown works.">
    <Textarea placeholder="What changed and why" />
  </Field>
</div>

Use it for

Around every Input, Textarea, Select, Checkbox or Switch that needs a label.

Use something else for

Putting two controls in one Field: use one Field each.

Props

Prop	Type	Default	Description
`label`	`ReactNode`	`none`	The visible label.
`labelAside`	`ReactNode`	`none`	Small text at the right of the label, like Optional.
`hint`	`ReactNode`	`none`	Helper text under the control.
`error`	`ReactNode`	`none`	Error message; marks the control invalid.
`required`	`boolean`	`none`	Asterisk on the label and required on the control.
`disabled`	`boolean`	`none`	Disables the control and dims the label.
`children`	`ReactElement`	`none`	Exactly one control.

Accessibility

The label points at the control; hint and error are linked with aria-describedby.
error marks the control invalid and is read with it.