Officina UI
Components

Field

Labeled control wrapper that pulls validation errors from React Hook Form context by name.

Field wraps a single form control with its label, optional hint, and error message, and handles the accessibility wiring (id, aria-invalid, aria-describedby) for you. Inside a Form, pass name and it reads the matching validation error straight from React Hook Form context; you can also pass an error string manually to override it. The child can be a regular element (it gets cloned with the resolved ARIA props) or a render function that receives those props.

Example

Preview

Field wires label, hint, invalid state, and describedby IDs.

import { Field, Input } from '@officina/ui';

<Field name="email" label="Email" hint="We never share it." required>
  <Input type="email" />
</Field>;

API

PropTypeDefaultDescription
label*string—Visible field label.
errorstring—Manual error message; overrides any RHF error for `name`.
hintstring—Helper text shown below the control.
namestring—RHF field name — used to read validation errors from form context.
requiredboolean—Marks the field required (adds the required indicator).

Form

React Hook Form wrapper that provides form context and runs validation on submit.

Fieldset

Bordered group of related fields with a legend, description, and built-in grid layout.

On this page

ExampleAPI