TailwindForm

Like TailwindCSS, but for form markup.
className your way to forms!

React Server ComponentsZero StatePlain HTMLNo Opinions

<Form className="form-field-email:email:required

       -field-password:password:required-submit-Log_In" />

renders

Syntax Reference

<Form className="form[-id-X]-field-{name}[:{type}][:{modifier}]...-submit[-{label}]" />

field-name

Text field

field-email:email

Email type

:required

Required

:options-a,b,c

Select/Radio

submit-Sign_Up

Submit button

form-id-login

ID prefix

Type	Output
`text` (default)	`<input type="text">`
`email`	`<input type="email">`
`password`	`<input type="password">`
`textarea`	`<textarea>`
`select`	`<select>`
`radio`	`<input type="radio">` group
`checkbox`	`<input type="checkbox">`
`number`, `date`, `file`, etc.	Corresponding HTML input types

Real forms generated from className

Email + password with submit

<Form className="form-field-email:email:required-field-password:password:required-submit-Log_In" />

renders

Name, email, message textarea

<Form className="form-field-name:text:required-field-email:email:required-field-message:textarea:required-submit-Send" />

renders

Select with default value

<Form className="form-field-name-field-role:select:options-admin,user,guest:value-user-submit-Save" />

renders

Radio buttons with options

<Form className="form-field-plan:radio:options-free,pro,enterprise:value-pro-submit-Choose" />

renders

Underscore becomes space

<Form className="form-field-search:text:placeholder-Search_products...-submit-Search" />

renders

Checkbox field

<Form className="form-field-terms:checkbox:required-submit-Submit" />

renders

Use form-id-X to prefix field IDs

form-id-login-field-email:email-submit

Input ID: login-email

form-id-news-field-email:email-submit-Subscribe

Input ID: news-email

// With server action

import { Form } from '@tailwind-stack/form'

<Form

  className="form-field-name-field-email:email-submit"

  action={myServerAction}

/>

// Or REST

<Form

  className="form-field-title-field-body:textarea-submit"

  action="/api/posts"

  method="POST"

/>

// Add extra content via children

<Form className="form-field-name" action={action}>

  <p>Custom content here</p>

  <button type="submit">Go</button>

</Form>