ink-zone / fomir

A Schema-First Form Library

Fomir

A Schema-First form library

Installation

npm install fomir

Quick Start

function BasicForm() {
  const form = useForm({
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    },
    children: [
      {
        label: 'First Name',
        name: 'firstName',
        component: 'Input',
        value: '',
      },
      {
        label: 'Last Name',
        name: 'lastName',
        component: 'Input',
        value: '',
      },
      {
        component: 'Submit',
        text: 'submit',
      },
    ],
  })

  return <Form form={form} />
}

Markup Schema

Fomir also supports building form using markup.

function BasicForm() {
  const form = useForm({
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    },
  })

  return (
    <Form form={form}>
      <h2>Basic Info</h2>
      <Box bgGray100 rounded p3 mb4>
        <Field component="Input" label="First Name" name="firstName" />
        <Field component="Input" label="Last Name" name="lastName" />
      </Box>

      <h2>Extra Info</h2>
      <Box bgGray100 rounded p3 mb4>
        <Field component="Input" label="Email" name="email" />
        <Field component="Textarea" label="Bio" name="bio" />
      </Box>

      <button>Submit</button>
    </Form>
  )
}

Documentation

Documentation website: fomir.vercel.app

Development

• Contributing Guide

License

MIT License