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

Skeleton relies on the official Tailwind Forms plugin to normalize form styling. This implements rudimentary base styles, while also making it easier to customize each element. If you plan to implement forms in your project, make sure this plugin is installed.

Plugin Doc

Video Guide

Install the @tailwindcss/forms package.

npm install -D @tailwindcss/forms

Implement the plugin in your tailwind.config, ideally before the Skeleton plugin.

import forms from '@tailwindcss/forms';

export default {
  plugins: [
    forms,
    // skeleton()
  ]
};

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="mx-auto w-full max-w-md space-y-8">
  <!-- Website -->
  <div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
    <div class="input-group-cell preset-tonal-surface">https://</div>
    <input type="text" placeholder="www.example.com" />
  </div>
  <!-- Amount -->
  <div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
    <div class="input-group-cell preset-tonal-surface">
      <CircleDollarSign size={16} />
    </div>
    <input type="text" placeholder="Amount" />
    <select>
      <option>USD</option>
      <option>CAD</option>
      <option>EUR</option>
    </select>
  </div>
  <!-- Username -->
  <div class="input-group divide-surface-200-800 grid-cols-[1fr_auto] divide-x">
    <input type="text" placeholder="Enter Username..." />
    <button class="btn preset-filled" title="Username already in use.">
      <Check size={16} />
    </button>
  </div>
  <!-- Search -->
  <div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
    <div class="input-group-cell">
      <Search size={16} />
    </div>
    <input type="search" placeholder="Search..." />
    <button class="btn preset-filled">Submit</button>
  </div>
</form>