Forms

Install the Forms Plugin

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

npm install -D @tailwindcss/forms

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

Use Native Elements

Create form elements using native HTML markup. We recommend span tags for label text.

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

Input Groups

Create a horizontal group of elements related to an input. Surrounding elements can be a div, button, or anchor. Use Tailwind's abitrary column syntax to define column widths. The auto value will fit the element's width, while 1fr will fill all available available width.

The .input-group-divider class is optional. Removing it will exclude the vertical divider lines.

<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
	<div class="input-group-shim">(icon)</div>
	<input type="search" placeholder="Search..." />
	<button class="btn-filled-secondary">Submit</button>
</div>

Variants

Skeleton provides a set of variant classes that can be paired with your form validation logic.

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

Excluding Styles

Use the .unstyled class to exclude and zero out styles for a single input element. However, please note any styles provided by the Tailwind Forms plugin will remain in place. See the example below.

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

Browser Support

Please be aware that not all native HTML input styles and features are consistent across browsers or operating system. Please be sure to verify your elements work as desired in all target browsers for your application.

See Also

Skeleton provides an extended set of input components. The documentation for each of these is linked below.