form

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

@fluixi-ui/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-ui/form
# The real engine lives in the consumer:
pnpm add @fluixi/forms

Usage

import { createForm, createField, required, email } from '@fluixi/forms';
import { Form, FormField } from '@fluixi-ui/form';
import { Input } from '@fluixi-ui/input';

const form = createForm({
  name: createField('', { validators: [required('Your name is required')] }),
  email: createField('', { validators: [required('Email is required'), email('Enter a valid email')] }),
});

<Form form={form} onSubmit={(values) => save(values)}>
  {/* No render fn needed — FormField renders a labelled Input by default */}
  <FormField control={form.get('name')} label="Full name" />

  {/* Or provide a render fn; the binding (`b`) carries value + handlers */}
  <FormField control={form.get('email')} label="Email">
    {(b) => (
      <Input type="email" value={b.value()} onInput={b.onInput} onBlur={b.onBlur} />
    )}
  </FormField>

  <button type="submit" disabled={form.submitting()}>Create account</button>
</Form>

For non-text controls the binding exposes the matching props: onChange for value components (Select/RadioGroup) and checked/onCheckedChange for booleans (Checkbox/Switch). bindControl(control) returns the same props object when you wire a control outside a FormField.

Parts

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