Forms — Tailwind Demo

← Back to index

# Forms

Input types, layouts, validation states, and form patterns.

## Personal Information

Two-column responsive grid layout.

First name *
Last name *
Email address *
Phone number
+1
Date of birth
Website
https://
Bio

Max 200 characters.

## Account Settings

Stacked layout with inline labels and helper text.

Username

Your public handle.

acme.io/
Language

Display language for the UI.

Timezone

Used for reports and scheduling.

Notifications

Choose what you hear about.

Email digests

Weekly summary of your activity.

Product updates

New features and changelog.

Security alerts

Login attempts and policy changes.

## Selects, Radios & Checkboxes

Choice inputs in various layouts.

Interests (pick any)
Design Engineering Marketing Finance Operations Product
Billing cycle

Monthly

Billed every month

Yearly −20%

Billed every year

Lifetime

One-time payment

Role
Admin Full access to all resources.
Editor Can create and edit content.
Viewer Read-only access.

## Validation States

Default, success, error, disabled, and loading.

Default
Success
✓

Looks good!

Error
✗

Please enter a valid email address.

Disabled

This field cannot be edited.

Loading / pending
Search
🔍

## File Upload & Range

Upload dropzone, range slider, and color picker.

Profile picture
📂

Drop files here or browse

PNG, JPG or GIF — max 5 MB

Volume 72%
0 100
Brand color