Form

Form is the canonical wrapper for every form in the library. You create a React Hook Form instance with useForm, pass it as the form prop, and Form spreads it through FormProvider so nested Field and control components can read state and errors from context. It renders a <form noValidate> and wires onSubmit through form.handleSubmit, so your handler only runs once validation passes.

Example

import { Form, Field, Input } from '@officina/ui';
import { useForm } from 'react-hook-form';

function ProfileForm() {
  const form = useForm({ defaultValues: { workspace: '' } });
  return (
    <Form form={form} onSubmit={(values) => console.log(values)}>
      <Field name="workspace" label="Workspace">
        <Input />
      </Field>
    </Form>
  );
}

API

Form

The React Hook Form wrapper.

FormControl

Context provider that wires a label, helper text, and error to one control via ARIA. Field builds on it; use FormControl directly when you need a custom arrangement.

FormLabel

Label for a FormControl that auto-links to its control and shows a required indicator.

FormHelperText

Helper/description text for a FormControl, linked via aria-describedby, with tone options.

FormError

Error message for a FormControl that renders only while the control is marked invalid.

FormError adds no props of its own. It forwards all standard <p> attributes (plus ref and className) to the underlying element.

FormGrid

Responsive grid that arranges form fields into 1–4 columns that collapse on small screens.

FormActions

Footer row for form buttons with alignment control and an optional sticky bottom bar.