form

Structural form bindings that bridge @fluixi/forms reactive controls to UI components.

@fluixi/form connects a @fluixi/forms form engine to Fluixi UI components. It is structurally typed — it depends only on the shape of the reactive control objects, not on @fluixi/forms directly — so it composes with any compatible engine, and its own tests use plain signal mocks.

Installation

pnpm add @fluixi/form
# The real engine lives in the consumer:
pnpm add @fluixi/forms

Usage

import { useForm } from '@fluixi/forms';
import { Form, FormField, bindControl } from '@fluixi/form';
import { Input } from '@fluixi/input';
import { Select, SelectTrigger, SelectValue, SelectPortal, SelectContent, SelectItem } from '@fluixi/select';

const form = useForm({ defaultValues: { email: '', role: '' } });

<Form form={form} onSubmit={values => save(values)}>
  <FormField name="email" control={form.control('email')}>
    {(ctrl) => (
      <Field invalid={ctrl.invalid()}>
        <FieldLabel>Email</FieldLabel>
        <Input {...bindControl(ctrl)} type="email" />
        <FieldError>{ctrl.error()?.message}</FieldError>
      </Field>
    )}
  </FormField>
</Form>

Parts

Part	Description
`Form`	Root. Accepts `form` (a `ReactiveForm`) and `onSubmit`; prevents default and validates on submit. Children may be JSX or a render fn `(form) => JSX`.
`FormField`	Wraps a single control. Render prop receives the control; wires `Field` invalid/required state.
`FormArray`	Wraps an array control; render prop receives items.
`bindControl`	Returns the correct props object (`value`+`onInput` for text, `value`+`onChange` for value components, `checked`+`onCheckedChange` for booleans).

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.