Maple · Forms

Form Field

A complete field: label, Input and a helper or error message. Use it in forms instead of a bare Input so every field is labelled and errors say how to fix them.

View in Storybook →

States

Label, hint, helper and error, wired up with aria-describedby.

Email addressRequired

We’ll only use this to send receipts.

Email addressRequired

Enter an email like name@example.com

Company

Set by your admin.

<FormField label="Email address" hint="Required" error={err}>
  {({ id, describedBy }) => <Input id={id} aria-describedby={describedBy} error={!!err} />}
</FormField>

Props

Prop	Type	Default	Description
`label`	`string`	—	Field label.
`hint`	`string`	—	Right-aligned hint, e.g. Required.
`helper`	`ReactNode`	—	Helper text.
`error`	`ReactNode`	—	Error text; replaces helper.
`children`	`({ id, describedBy }) => ReactNode`	—	Render the control with these ids.