Forms
TailwindPair with the Tailwind Forms plugin to style various input fields.
Stylesheets
Package
Source
Doc
Dependencies
Examples
Tap the View Page Source above to inspect each example shown below.
Getting Started
Tailwind Forms Plugin
RequiredThe Tailwind Forms plugin normalizes form field styles, making them easier to customize. See Tailwind's YouTube tutorial.
npm install -D @tailwindcss/formsMake sure to add the Tailwind Forms plugin
to your
tailwind.config.cjs
module.exports = {
plugins: [
require('@tailwindcss/forms'),
// NOTE: Insert above the 'skeleton.cjs' plugin
],
}Once installed, input fields will remain unstyled by default, aside from rudimentary styles provided by this plugin.
Native by Default
Unlike other UI libraries, Skeleton relies heavily on native HTML form fields. We feel this provides the best user experience and optimal accessability. Form field styles are opt-in, meaning you need to append one of the classes shown below.
Labels
You may optionally apply the .label class which implements .space-y-2. Note that we favor
span tags for the actual text label itself.
<label class="label">
<span>Label Text</span>
<!-- (form field goes here) --->
</label>Form Fields
Examples of each type of field are shown below. Note that input styles automatically adjust based on type.
<input class="input" ...><textarea class="textarea" ... /><select class="select">...</select><input class="checkbox" ... /><input class="radio" ... />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-divideris an optional class that applies vertical divider lines. - The
.input-group-shimclass will apply subtle shading to a segment to draw more attention.
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">(segment)</div>
<input type="search" placeholder="Search..." />
<button class="variant-filled-secondary">Submit</button>
</div>Variants
Skeleton includes a Material Design inspired variant. Use this as a reference for building your own variant classes.
<input ... class="input variant-form-material" />
<select ... class="select variant-form-material" />
<textarea ... class="textarea variant-form-material" />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.
<input ... class="input-success" />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.
See Also
Skeleton provides an extended set of custom form components.