Forms and Inputs - Skeleton

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

<label class="label">
  <span class="label-text">Select</span>
  <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>
</label>

<label class="label">
  <span class="label-text">Textarea</span>
  <textarea class="textarea" rows="4" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit."></textarea>
</label>

Prerequisites

Tailwind Forms

Skeleton relies on the official Tailwind Forms plugin to normalize form styling. Ths 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 it’s best to adhere to progressive enhancement best practices. However, we advise you validate support for each element per your target audience.

Inputs

<form class="mx-auto w-full max-w-md space-y-4">
  <input type="text" class="input" placeholder="Enter name" />
  <!-- --- -->
  <label class="label">
    <span class="label-text">Number</span>
    <input type="number" class="input" placeholder="Enter Age" />
  </label>
  <!-- --- -->
  <label class="label">
    <span class="label-text">Password</span>
    <input type="password" class="input" placeholder="Enter Password" />
  </label>
  <!-- --- -->
  <label class="label">
    <span class="label-text">Phone Number</span>
    <input type="tel" class="input" placeholder="ex: 214-555-1234" />
  </label>
  <!-- --- -->
  <label class="label">
    <span class="label-text">Search</span>
    <input type="search" class="input" placeholder="Search..." />
  </label>
</form>

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>
  <!-- Size -->
  <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 -->
  <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 { CircleDollarSign, Check, Search } 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">
      <CircleDollarSign 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.">
      <Check size={16} />
    </button>
  </div>
  <!-- Search -->
  <div class="input-group grid-cols-[auto_1fr_auto]">
    <div class="ig-cell preset-tonal">
      <Search 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.