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 and error, and aria-invalid while there's an error.

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; marks it invalid.	`ReactNode`	`—`
`hint` Help text under the control.	`ReactNode`	`—`

<FormMessage>

A message for a form as a whole: an error in a tinted box, or a quiet note.

Prop	Type	Default
`className`	`string`	`—`
`tone`	`"error" \| "info" \| "success"`	`info`