@crustack/form

Reusable components

Learn how to create reusable components with Crustack Form

Crustack Form enables you to create styled field components that can be shared and reused across multiple forms in your application.

Generate untyped form components

import { defineForm } from '@crustack/form'

const { Control, Label, Description, ErrorMessage, useFieldCtx } = defineForm()

Create a reusable input

export function Input(props: { label: string }) {
  const ctx = useFieldCtx()

  return (
    <div>
      <Label>{props.label}</Label>
      <Control>
        <input
          value={ctx.value}
          onChange={(e) => ctx.setValue(e.target.value)}
          onBlur={() => ctx.setTouched(true)}
        />
      </Control>
      <ErrorMessage />
    </div>
  )
}

Basic concepts

Learn the core concepts and principles behind Crustack Form to better understand how the library works.

Validation

Learn how to manage synchronous and asynchronous validation.