Tailwind

Forms

Pair with the Tailwind Forms plugin to style various input fields.

Source Page Source Tailwind Forms Plugin

Demo

Unlike other UI libraries, Skeleton relies heavily on native HTML form fields. This provides the best user experience and optimal accessibility. Note that form field styling is opt-in, which means a class must be applied to each element.

Install the Forms Plugin

The Tailwind Forms plugin normalizes form field styles, making them easier to customize and providing some rudimentary styles. See Tailwind's video tutorial for more information.

console 
npm install -D @tailwindcss/forms

Prepend the Tailwind Forms plugin to your tailwind.config.[ts|js],

javascript 
import forms from '@tailwindcss/forms';

export default {
	//...
	plugins: [
		forms,
		//...
	],
};

Labels

Input

Files

Textarea

Select

Checkboxes

Radio Groups

Range

Color

Input Groups

Create a horizontal group of related form fields.

  • Groups support most input types and select elements, but not all.
  • The column sizes are grid-based, via Tailwind's arbitrary column syntax.
  • Descriptive segments (on either side) allow for div, button, and anchor (a) elements.
  • The .input-group-divider class applies vertical divider lines.
  • The .input-group-shim class applies subtle shading to a segment, to draw more attention.

Variants

Skeleton includes a forms variant inspired by Material Design. Use this as a reference for building your own variant classes.

Validation Classes

Skeleton provides a set of classes for indicating form validation. These must come last in a group of class values. They are compatible with the variant above.

Browser Support

Please be aware that not all native HTML form fields work consistently across browsers or operating systems. We strongly recommend cross-device/OS/browser testing to ensure compatibility for your target audience.