Forms

The Tailwind Forms plugin is required if you wish to use Skeleton's form styles. This plugin normalizes the styles, which makes them easier to customize. See the Tailwind's YouTube tutorial for more information.

npm install -D @tailwindcss/forms

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

Using Native Elements

Unlike other UI libraries, Skeleton relies heavily on native inputs for form fields. We feel these provide the best user experience and optimal accessability. Most native inputs will work out of the box.

<label class="input-label">
	<span>Name</span>
	<input type="text" id="name" bind:value={name} minlength="2" required>
</label>

<label class="input-label">
	<span>Flavors</span>
	<select name="flavors" id="flavors" bind:value={flavorValue}>
		<option value="chocolate">Chocolate</option>
		<option value="vanilla">Vanilla</option>
		<option value="strawberry">Strawberry</option>
	</select>
</label>

Vertical Spacing

Note that we recommend span tags for label text and implement a vertical spacing class on the label using .input-label. This implements the Tailwind .space-y-2 class by default, but feel free to override.

Browser Support

Please be aware that not all native HTML input styles and features are consistent across browsers or operating system. Make sure you do proper cross device/OS/browser testing to ensure compability for your target audience.

Input Groups

Create a horizontal group of elements related to an input. We've detailed a few requirements below.

• Groups support most input types and select elements.
• These are grid-based. Set column witdth using Tailwind's abitrary column syntax.
• The .input-group-divider class is optional. This sets the vertical segment divider lines.
• Surrounding segments (shown on the left and right) allow for div, button, and anchor elements.
• The .input-group-shim class will apply shading to a segment.

<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>

Validation Classes

Skeleton provides a set of validation classes that can be triggered with your own custom form validation logic.

<input ... class="input-success" />

Excluding Styles

Use the .unstyled class to exclude and and remove Skeleton-provide styles. Please be aware that base styles provided by the Tailwind Forms plugin will remain per the example below.

<input ... class="unstyled" />

See Also

Skeleton provides an extended set of custom form components.