Basic Usage

Initialize the Form System

First, initialize the form system by defining your form components. This can be done in a standalone file:

// src/form.tsx
import initStructalForm from '@structal/form';
import structalChakraComponents from '@structal/form/adapters/chakra';

export const { makeForm } = initStructalForm({
  components: {
    ...structalChakraComponents,
  },
});

A makeForm function will be exposed in this initialization file, which will be referenced by other parts of your application wherever form inputs are needed.

Create Structal Form

Next, create a structured form by defining its fields. using the initialized form system.

import { makeForm } from 'src/form.tsx';

const { Form } = makeForm({
  // the available components will be passed in as the first parameter
  fields: (c) => ({
    name: c.text({ label: 'Name' }),
    age: c.number({ label: 'Age' }),
  }),
});

Render the Form

Finally, render the form in your component.

const MyFormComponent = () => {
  return (
    <Form
      onSubmit={(values) => {
        // values: { name: string, age: number }
      }}
    >
      <Form.Field name="name" />
      <Form.Field name="age" />
      <button type="submit">Submit</button>
    </Form>
  );
};

export default MyFormComponent;