Logbook

Form with validation. Your rules, and error messages that say what went wrong and how to fix it.

Component: Form with validation
Pattern: Native form + error summary
Outputs: React + Tailwind, HTML/CSS/JS
Status: In stock, tested

Configure

Title
Heading above the fields.
Intro
One line under the heading. Leave empty to drop it.
We answer every message within two working days.
Fields
One row per field. Type: text, email, tel, url, number, date, textarea, select or checkbox. Required: yes or no. Min and max are lengths for text, values for numbers, dates for dates.
1. Field 1
  Label for field 1Type for field 1Required (yes/no) for field 1Min for field 1Max for field 1Pattern (regular expression) for field 1Choices, separated by commas for field 1Hint under the label for field 1
2. Field 2
  Label for field 2Type for field 2Required (yes/no) for field 2Min for field 2Max for field 2Pattern (regular expression) for field 2Choices, separated by commas for field 2Hint under the label for field 2
3. Field 3
  Label for field 3Type for field 3Required (yes/no) for field 3Min for field 3Max for field 3Pattern (regular expression) for field 3Choices, separated by commas for field 3Hint under the label for field 3
4. Field 4
  Label for field 4Type for field 4Required (yes/no) for field 4Min for field 4Max for field 4Pattern (regular expression) for field 4Choices, separated by commas for field 4Hint under the label for field 4
5. Field 5
  Label for field 5Type for field 5Required (yes/no) for field 5Min for field 5Max for field 5Pattern (regular expression) for field 5Choices, separated by commas for field 5Hint under the label for field 5
6. Field 6
  Label for field 6Type for field 6Required (yes/no) for field 6Min for field 6Max for field 6Pattern (regular expression) for field 6Choices, separated by commas for field 6Hint under the label for field 6
6 of 14
Submit button text
Name the action.
Success message
Shown and announced once the form is sent.
Thanks. Your message has been sent.

Everything at default

Logbook · React + TailwindFull width

Keyboard map
Keys	What happens
`Tab`or`Shift + Tab`	Move between the fields in reading order.
`Space`	Tick or untick a checkbox, or open a choice list.
`Enter`	In a single-line field: send the form.
`Enter`	On an error summary link: jump to the field that needs fixing.

Take it home

React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.

npx shadcn@latest add "/r/form.json"

Run it in your project root. It writes components/form.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).

Logbook

Test bench

Take it home