Forms and Inputs

<label class="label">
	<span class="label-text">Input</span>
	<input class="input" type="text" placeholder="Input" />
</label>

Prerequisites

Tailwind Forms

Skeleton relies on the official Tailwind Forms plugin to normalize form styling. This plugin is required if you wish to make use of any utility classes provided on this page.

Plugin Doc

Install the @tailwindcss/forms package.

npm install -D @tailwindcss/forms

Implement the plugin using the @plugin directive immediately following the tailwindcss import.

@import 'tailwindcss';
@plugin '@tailwindcss/forms';

/* ...Skeleton config here... */

Browser Support

The display of native and semantic HTML form elements can vary between both operating systems and browsers. Skeleton does its best to adhere to progressive enhancement best practices. However, we advise you validate support for each element per your target audience.

Inputs

Input

<label class="label">
	<span class="label-text">Input</span>
	<input class="input" type="text" placeholder="Input" />
</label>

Select

<form class="mx-auto w-full max-w-md space-y-4">
	<!-- Default -->
	<select class="select">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
		<option value="5">Option 5</option>
	</select>

	<!--
		NOTE: the following Select element variants are included purely for legacy support. It is not longer advised you use these variants in production apps. Currently the styles are too limited and the style API vary greatly between browser vendors. Expect these styles to be removed in the next major version of Skeleton (v4.0). In the meantime, consider a replacement using a custom Listbox component if you need this type of interface in your application. We've provided some resources below to guide you in this process.

		ARIA APG Guidelines:
		https://www.w3.org/WAI/ARIA/apg/patterns/listbox/

		Zag.js Listbox component:
		(NOTE: this will come to Skeleton in the future)
		https://zagjs.com/components/react/listbox
		https://zagjs.com/components/svelte/listbox

		Similar components may also exist or third party libraries such as Bits, Melt, or Radix:
		https://www.skeleton.dev/docs/headless/bits-ui
		https://www.skeleton.dev/docs/headless/melt-ui
		https://www.skeleton.dev/docs/headless/radix-ui
	-->

	<!-- Size Variant -->
	<!-- <select class="select rounded-container" size="4" value="1">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
		<option value="5">Option 5</option>
	</select> -->

	<!-- Multiple Variant -->
	<!-- <select class="select rounded-container" multiple value="['1', '2']">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
		<option value="5">Option 5</option>
	</select> -->
</form>

Checkboxes

<form class="space-y-2">
	<label class="flex items-center space-x-2">
		<input class="checkbox" type="checkbox" checked />
		<p>Option 1</p>
	</label>
	<label class="flex items-center space-x-2">
		<input class="checkbox" type="checkbox" />
		<p>Option 2</p>
	</label>
	<label class="flex items-center space-x-2">
		<input class="checkbox" type="checkbox" />
		<p>Option 3</p>
	</label>
</form>

Radio Groups

<form class="space-y-2">
	<label class="flex items-center space-x-2">
		<input class="radio" type="radio" checked name="radio-direct" value="1" />
		<p>Option 1</p>
	</label>
	<label class="flex items-center space-x-2">
		<input class="radio" type="radio" name="radio-direct" value="2" />
		<p>Option 2</p>
	</label>
	<label class="flex items-center space-x-2">
		<input class="radio" type="radio" name="radio-direct" value="3" />
		<p>Option 3</p>
	</label>
</form>

Kitchen Sink

Display and functionality of these elements may vary greatly between devices and browsers.

<form class="mx-auto w-full max-w-md space-y-4">
	<!-- Date Picker -->
	<label class="label">
		<span class="label-text">Date</span>
		<input class="input" type="date" />
	</label>
	<!-- File Input -->
	<label class="label">
		<span class="label-text">File Input</span>
		<input class="input" type="file" />
	</label>
	<!-- Range -->
	<label class="label">
		<span class="label-text">Range</span>
		<input class="input" type="range" value="75" max="100" />
	</label>
	<!-- Progress -->
	<label class="label">
		<span class="label-text">Progress</span>
		<progress class="progress" value="50" max="100"></progress>
	</label>
	<!-- Color -->
	<!-- TODO: convert to mini-component for reactive value -->
	<div class="grid grid-cols-[auto_1fr] gap-2">
		<input class="input" type="color" value="#bada55" />
		<input class="input" type="text" value="#bada55" readonly tabindex="-1" />
	</div>
</form>

Groups

Input groups support a subset of form elements and button styles. These pair well with Presets .

---
import { CheckIcon, CircleDollarSignIcon, SearchIcon } from 'lucide-react';
---

<form class="w-full space-y-8">
	<!-- Website -->
	<div class="input-group grid-cols-[auto_1fr_auto]">
		<div class="ig-cell preset-tonal">https://</div>
		<input class="ig-input" type="text" placeholder="www.example.com" />
	</div>
	<!-- Amount -->
	<div class="input-group grid-cols-[auto_1fr_auto]">
		<div class="ig-cell preset-tonal">
			<CircleDollarSignIcon size={16} />
		</div>
		<input class="ig-input" type="text" placeholder="Amount" />
		<select class="ig-select">
			<option>USD</option>
			<option>CAD</option>
			<option>EUR</option>
		</select>
	</div>
	<!-- Username -->
	<div class="input-group grid-cols-[1fr_auto]">
		<input class="ig-input" type="text" placeholder="Enter Username..." />
		<button class="ig-btn preset-filled" title="Username already in use.">
			<CheckIcon size={16} />
		</button>
	</div>
	<!-- Search -->
	<div class="input-group grid-cols-[auto_1fr_auto]">
		<div class="ig-cell preset-tonal">
			<SearchIcon size={16} />
		</div>
		<input class="ig-input" type="search" placeholder="Search..." />
		<button class="ig-btn preset-filled">Submit</button>
	</div>
</form>

Class	Usage
`input-group`	Defines the parent input group set.
`ig-cell`	Defines a child cell for text or icons.
`ig-input`	Defines a child input of `type="text"`.
`ig-select`	Defines a child select element.
`ig-btn`	Defines a child button.