Components

Field

A label, hint and error wired to their control for screen readers, and messages for a whole form.

Import

import { Field, FormMessage } from '@rinzai/zen';

API reference

<Field>

A labelled form control with an optional hint and error. Links them for screen readers: the control gets an id (if it has none), aria-describedby for the hint or error, and aria-invalid while there's an error. The error shows in place of the hint until it's fixed.

The direct child gets these as props. When the control sits inside other markup (e.g. an amount beside a unit select), give it an id and pass the same id as htmlFor: Zen's controls with that id pick them up themselves.

Prop	Type	Default
`children`Required One control (Input, Select, MoneyInput…), or anything else (then link it yourself).	`ReactNode`	`—`
`label`Required	`ReactNode`	`—`
`className`	`string`	`—`
`error` Error under the control, in place of the hint; marks it invalid.	`ReactNode`	`—`
`hint` Help text under the control.	`ReactNode`	`—`
`htmlFor` The control's id, when it isn't the direct child (it's inside other markup).	`string`	`—`

<FormMessage>

A message for a form as a whole: an error or success in a tinted box, or a quiet note. An Alert, set for forms.

Prop	Type	Default
`icon` Replaces the tone's icon (info, check, warning); `null` for none.	`ReactNode`	`—`
`title` A first line in the tone's colour; the text under it is quieter.	`ReactNode`	`—`
`tone`	`"default" \| "negative" \| "positive"`	`default`