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 accessability. 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 rudementary styles. See Tailwind's video tutorial for more information.

console 
npm install -D @tailwindcss/forms

Prepend the Tailwind Forms plugin to your tailwind.config.cjs

javascript 
module.exports = {
	plugins: [
		require('@tailwindcss/forms'),
		// NOTE: Insert above the 'skeleton.cjs' plugin
	],
}

Labels

Input

Files

Textarea

Select

Checkboxes

Radio Groups

Range

Color

Input Groups

Create a horizontal group of elements related form fields.

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

Variants

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

Validation Classes

Skeleton provides a set of classes for use with form validation logic. These must come last, but are compatible with the variant above.

Browser Support

Please be aware that not all native HTML form fields consistent across browsers or operating system. We strongly recommend cross device/OS/browser testing to ensure compability for your target audience.