Comprehensive form components including inputs, buttons, checkboxes, selects, and specialized form elements with full styling and state variants.
Versatile button component with multiple variants, sizes, and states.
<!-- Basic buttons -->
<button class="btn">Default Button</button>
<button class="btn btn-neutral">Neutral</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>
<!-- Button sizes -->
<button class="btn btn-lg">Large</button>
<button class="btn">Normal</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-xs">Extra Small</button>
<!-- Button states -->
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>
<!-- Button modifiers -->
<button class="btn btn-outline">Outline</button>
<button class="btn btn-wide">Wide</button>
<button class="btn btn-block">Block (Full Width)</button>
<button class="btn btn-square">Square</button>
<button class="btn btn-circle">Circle</button>
<!-- Button states -->
<button class="btn" disabled>Disabled</button>
<button class="btn loading">Loading</button>Usage Examples:
<!-- Submit button for forms -->
<button type="submit" class="btn btn-primary">Submit Form</button>
<!-- Button with icon -->
<button class="btn btn-square btn-outline">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
</svg>
</button>Text input fields with various styles and states.
<!-- Basic inputs -->
<input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
<input type="text" placeholder="Type here" class="input input-ghost w-full max-w-xs" />
<input type="text" placeholder="Type here" class="input input-bordered input-primary w-full max-w-xs" />
<!-- Input sizes -->
<input type="text" placeholder="Large" class="input input-bordered input-lg w-full max-w-xs" />
<input type="text" placeholder="Normal" class="input input-bordered w-full max-w-xs" />
<input type="text" placeholder="Small" class="input input-bordered input-sm w-full max-w-xs" />
<input type="text" placeholder="Extra Small" class="input input-bordered input-xs w-full max-w-xs" />
<!-- Input colors -->
<input type="text" placeholder="Primary" class="input input-bordered input-primary w-full max-w-xs" />
<input type="text" placeholder="Secondary" class="input input-bordered input-secondary w-full max-w-xs" />
<input type="text" placeholder="Accent" class="input input-bordered input-accent w-full max-w-xs" />
<input type="text" placeholder="Info" class="input input-bordered input-info w-full max-w-xs" />
<input type="text" placeholder="Success" class="input input-bordered input-success w-full max-w-xs" />
<input type="text" placeholder="Warning" class="input input-bordered input-warning w-full max-w-xs" />
<input type="text" placeholder="Error" class="input input-bordered input-error w-full max-w-xs" />
<!-- Input states -->
<input type="text" placeholder="Disabled" class="input input-bordered w-full max-w-xs" disabled />
<input type="text" placeholder="Read only" class="input input-bordered w-full max-w-xs" readonly />Usage Examples:
<!-- Form field with label -->
<div class="form-control w-full max-w-xs">
<label class="label">
<span class="label-text">What is your name?</span>
</label>
<input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
<label class="label">
<span class="label-text-alt">Bottom Left label</span>
<span class="label-text-alt">Bottom Right label</span>
</label>
</div>Multi-line text input with sizing and styling options.
<!-- Basic textarea -->
<textarea class="textarea" placeholder="Bio"></textarea>
<textarea class="textarea textarea-bordered" placeholder="Bio"></textarea>
<textarea class="textarea textarea-ghost" placeholder="Bio"></textarea>
<!-- Textarea sizes -->
<textarea class="textarea textarea-lg" placeholder="Large"></textarea>
<textarea class="textarea" placeholder="Normal"></textarea>
<textarea class="textarea textarea-sm" placeholder="Small"></textarea>
<textarea class="textarea textarea-xs" placeholder="Extra Small"></textarea>
<!-- Textarea colors -->
<textarea class="textarea textarea-primary" placeholder="Primary"></textarea>
<textarea class="textarea textarea-secondary" placeholder="Secondary"></textarea>
<textarea class="textarea textarea-accent" placeholder="Accent"></textarea>
<textarea class="textarea textarea-info" placeholder="Info"></textarea>
<textarea class="textarea textarea-success" placeholder="Success"></textarea>
<textarea class="textarea textarea-warning" placeholder="Warning"></textarea>
<textarea class="textarea textarea-error" placeholder="Error"></textarea>
<!-- Textarea states -->
<textarea class="textarea" placeholder="Disabled" disabled></textarea>Dropdown selection with styling variants.
<!-- Basic select -->
<select class="select select-bordered w-full max-w-xs">
<option disabled selected>Pick your favorite Simpson</option>
<option>Homer</option>
<option>Marge</option>
<option>Bart</option>
<option>Lisa</option>
<option>Maggie</option>
</select>
<!-- Select sizes -->
<select class="select select-bordered select-lg w-full max-w-xs">
<option>Large</option>
</select>
<select class="select select-bordered w-full max-w-xs">
<option>Normal</option>
</select>
<select class="select select-bordered select-sm w-full max-w-xs">
<option>Small</option>
</select>
<select class="select select-bordered select-xs w-full max-w-xs">
<option>Extra Small</option>
</select>
<!-- Select colors -->
<select class="select select-primary w-full max-w-xs">
<option>Primary</option>
</select>
<select class="select select-secondary w-full max-w-xs">
<option>Secondary</option>
</select>
<select class="select select-accent w-full max-w-xs">
<option>Accent</option>
</select>
<!-- Select states -->
<select class="select select-bordered w-full max-w-xs" disabled>
<option>Disabled</option>
</select>Checkbox input with styling variants and custom colors.
<!-- Basic checkbox -->
<input type="checkbox" checked="checked" class="checkbox" />
<input type="checkbox" class="checkbox" />
<!-- Checkbox sizes -->
<input type="checkbox" checked="checked" class="checkbox checkbox-lg" />
<input type="checkbox" checked="checked" class="checkbox" />
<input type="checkbox" checked="checked" class="checkbox checkbox-sm" />
<input type="checkbox" checked="checked" class="checkbox checkbox-xs" />
<!-- Checkbox colors -->
<input type="checkbox" checked="checked" class="checkbox checkbox-primary" />
<input type="checkbox" checked="checked" class="checkbox checkbox-secondary" />
<input type="checkbox" checked="checked" class="checkbox checkbox-accent" />
<input type="checkbox" checked="checked" class="checkbox checkbox-info" />
<input type="checkbox" checked="checked" class="checkbox checkbox-success" />
<input type="checkbox" checked="checked" class="checkbox checkbox-warning" />
<input type="checkbox" checked="checked" class="checkbox checkbox-error" />
<!-- Checkbox states -->
<input type="checkbox" class="checkbox" disabled />
<input type="checkbox" checked="checked" class="checkbox" disabled />Usage Examples:
<!-- Checkbox with label -->
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Remember me</span>
<input type="checkbox" checked="checked" class="checkbox" />
</label>
</div>Radio button input with styling variants.
<!-- Basic radio -->
<input type="radio" name="radio-1" class="radio" checked />
<input type="radio" name="radio-1" class="radio" />
<!-- Radio sizes -->
<input type="radio" name="radio-2" class="radio radio-lg" checked />
<input type="radio" name="radio-2" class="radio" />
<input type="radio" name="radio-2" class="radio radio-sm" />
<input type="radio" name="radio-2" class="radio radio-xs" />
<!-- Radio colors -->
<input type="radio" name="radio-3" class="radio radio-primary" checked />
<input type="radio" name="radio-3" class="radio radio-secondary" />
<input type="radio" name="radio-3" class="radio radio-accent" />
<input type="radio" name="radio-3" class="radio radio-info" />
<input type="radio" name="radio-3" class="radio radio-success" />
<input type="radio" name="radio-3" class="radio radio-warning" />
<input type="radio" name="radio-3" class="radio radio-error" />
<!-- Radio states -->
<input type="radio" name="radio-4" class="radio" disabled />
<input type="radio" name="radio-4" class="radio" checked disabled />Toggle switch with styling variants.
<!-- Basic toggle -->
<input type="checkbox" class="toggle" checked />
<input type="checkbox" class="toggle" />
<!-- Toggle sizes -->
<input type="checkbox" class="toggle toggle-lg" checked />
<input type="checkbox" class="toggle" checked />
<input type="checkbox" class="toggle toggle-sm" checked />
<input type="checkbox" class="toggle toggle-xs" checked />
<!-- Toggle colors -->
<input type="checkbox" class="toggle toggle-primary" checked />
<input type="checkbox" class="toggle toggle-secondary" checked />
<input type="checkbox" class="toggle toggle-accent" checked />
<input type="checkbox" class="toggle toggle-info" checked />
<input type="checkbox" class="toggle toggle-success" checked />
<input type="checkbox" class="toggle toggle-warning" checked />
<input type="checkbox" class="toggle toggle-error" checked />
<!-- Toggle states -->
<input type="checkbox" class="toggle" disabled />
<input type="checkbox" class="toggle" checked disabled />Range slider input with styling options.
<!-- Basic range -->
<input type="range" min="0" max="100" value="25" class="range" />
<input type="range" min="0" max="100" value="50" class="range" />
<input type="range" min="0" max="100" value="75" class="range" />
<!-- Range sizes -->
<input type="range" min="0" max="100" value="40" class="range range-lg" />
<input type="range" min="0" max="100" value="50" class="range" />
<input type="range" min="0" max="100" value="60" class="range range-sm" />
<input type="range" min="0" max="100" value="70" class="range range-xs" />
<!-- Range colors -->
<input type="range" min="0" max="100" value="25" class="range range-primary" />
<input type="range" min="0" max="100" value="35" class="range range-secondary" />
<input type="range" min="0" max="100" value="45" class="range range-accent" />
<input type="range" min="0" max="100" value="55" class="range range-info" />
<input type="range" min="0" max="100" value="65" class="range range-success" />
<input type="range" min="0" max="100" value="75" class="range range-warning" />
<input type="range" min="0" max="100" value="85" class="range range-error" />Usage Examples:
<!-- Range with steps and labels -->
<input type="range" min="0" max="100" value="25" class="range range-primary" step="25" />
<div class="w-full flex justify-between text-xs px-2">
<span>0</span>
<span>25</span>
<span>50</span>
<span>75</span>
<span>100</span>
</div>File upload input with custom styling.
<!-- Basic file input -->
<input type="file" class="file-input w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered w-full max-w-xs" />
<input type="file" class="file-input file-input-ghost w-full max-w-xs" />
<!-- File input sizes -->
<input type="file" class="file-input file-input-bordered file-input-lg w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-sm w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-xs w-full max-w-xs" />
<!-- File input colors -->
<input type="file" class="file-input file-input-bordered file-input-primary w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-secondary w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-accent w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-info w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-success w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-warning w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-error w-full max-w-xs" />Star rating input component.
<!-- Basic rating -->
<div class="rating">
<input type="radio" name="rating-1" class="mask mask-star" />
<input type="radio" name="rating-1" class="mask mask-star" checked />
<input type="radio" name="rating-1" class="mask mask-star" />
<input type="radio" name="rating-1" class="mask mask-star" />
<input type="radio" name="rating-1" class="mask mask-star" />
</div>
<!-- Rating sizes -->
<div class="rating rating-lg">
<input type="radio" name="rating-2" class="mask mask-star" />
<input type="radio" name="rating-2" class="mask mask-star" checked />
<input type="radio" name="rating-2" class="mask mask-star" />
<input type="radio" name="rating-2" class="mask mask-star" />
<input type="radio" name="rating-2" class="mask mask-star" />
</div>
<!-- Rating with different mask shapes -->
<div class="rating">
<input type="radio" name="rating-3" class="mask mask-heart bg-red-400" />
<input type="radio" name="rating-3" class="mask mask-heart bg-red-400" checked />
<input type="radio" name="rating-3" class="mask mask-heart bg-red-400" />
<input type="radio" name="rating-3" class="mask mask-heart bg-red-400" />
<input type="radio" name="rating-3" class="mask mask-heart bg-red-400" />
</div>Layout components for organizing form elements.
<!-- Form control wrapper -->
<div class="form-control w-full max-w-xs">
<label class="label">
<span class="label-text">Pick the best fantasy franchise</span>
<span class="label-text-alt">Alt label</span>
</label>
<select class="select select-bordered">
<option disabled selected>Pick one</option>
<option>Star Wars</option>
<option>Harry Potter</option>
<option>Lord of the Rings</option>
</select>
<label class="label">
<span class="label-text-alt">Alt label</span>
<span class="label-text-alt">Alt label</span>
</label>
</div>
<!-- Label component standalone -->
<label class="label cursor-pointer">
<span class="label-text">Remember me</span>
<input type="checkbox" checked="checked" class="checkbox checkbox-primary" />
</label>// Button component types
type ButtonVariant =
| "btn-neutral" | "btn-primary" | "btn-secondary" | "btn-accent"
| "btn-ghost" | "btn-link" | "btn-info" | "btn-success"
| "btn-warning" | "btn-error";
type ButtonSize = "btn-lg" | "btn-sm" | "btn-xs";
type ButtonModifier =
| "btn-outline" | "btn-wide" | "btn-block" | "btn-square"
| "btn-circle" | "loading";
// Input component types
type InputVariant =
| "input-bordered" | "input-ghost" | "input-primary"
| "input-secondary" | "input-accent" | "input-info"
| "input-success" | "input-warning" | "input-error";
type InputSize = "input-lg" | "input-sm" | "input-xs";
// Form control types
interface FormControlClasses {
"form-control": string;
"label": string;
"label-text": string;
"label-text-alt": string;
}
// Generic form element colors
type FormElementColor =
| "primary" | "secondary" | "accent" | "info"
| "success" | "warning" | "error";
type FormElementSize = "lg" | "sm" | "xs";