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

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>
	{/* Mutiple */}
	<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..." />
	{/* File Input */}
	<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>EURO</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>