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.
Prepend the Tailwind Forms plugin
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
button, and anchor (
.input-group-dividerclass applies vertical divider lines.
.input-group-shimclass applies subtle shading to a segment, to draw more attention.
Skeleton includes a forms variant inspired by Material Design. Use this as a reference for building your own variant 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.
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.