@arachnejs/forms

import {
  createForm, Form, TextField, SelectField, CheckboxField,
  FormWhen, FormColumns, FormColumn, FormSection, FormArea,
} from "@arachnejs/forms";
import { s } from "@arachnejs/schema";

const form = createForm({
  schema: s.object({
    name: s.string({ min: 1 }),
    kind: s.string({ min: 1 }),
    company: s.string(),
    agree: s.boolean(),
  }),
  initial: { name: "", kind: "personal", company: "", agree: false },
  onSubmit: async (values) => console.log(values),
});

<Form form={form} submitLabel="Save">
  <FormSection title="Profile" description="Basic identity">
    <FormColumns>
      <FormColumn size={6}>
        <TextField form={form} name="name" label="Name" />
      </FormColumn>
      <FormColumn size={6}>
        <SelectField
          form={form}
          name="kind"
          label="Account type"
          options={[
            { value: "personal", label: "Personal" },
            { value: "business", label: "Business" },
          ]}
        />
      </FormColumn>
    </FormColumns>
  </FormSection>

  <FormWhen form={form} match={(v) => v.kind === "business"}>
    <FormArea title="Business details">
      <TextField form={form} name="company" label="Company" />
    </FormArea>
  </FormWhen>

  <CheckboxField form={form} name="agree" label="I agree" />
</Form>