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.

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>

Other Inputs

<form class="mx-auto w-full max-w-md space-y-4">
  <!-- Search -->
  <input class="input" type="search" placeholder="Search..." />
  <!-- 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

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

Note that cells and buttons support Preset utility classes.