Input Text Field Type
Select a city
<div class="preview-content grid grid-cols-1 lg:grid-cols-3">
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Simple Input</label>
<input type="text" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Label Input</label>
<input type="text" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
</div>
<div class="mb-4">
<label for="hs-leading-icon" class="block text-sm font-medium mb-2 text-dark">Type Search</label>
<div class="relative">
<input type="search" name="hs-leading-icon" class="form-input pl-9! w-full bg-light border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="Search">
<div class="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
<i class="icon icon-search"></i>
</div>
</div>
</div>
<div class="mb-4">
<label for="hs-leading-icon" class="block text-sm font-medium mb-2 text-dark">Valid Input</label>
<div class="relative">
<input type="text" id="hs-validation-name-error" name="hs-validation-name-error" class="form-input block w-full border-success rounded-lg sm:text-sm focus:border-success focus:ring-success" required="" aria-describedby="hs-validation-name-error-helper">
<div class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
<i class="icon icon-check text-success"></i>
</div>
</div>
</div>
<div class="mb-4">
<label for="hs-leading-icon" class="block text-sm font-medium mb-2 text-dark">Invalid Input</label>
<div class="relative">
<input type="text" id="hs-validation-name-error" name="hs-validation-name-error" class="form-input block w-full border-danger rounded-lg sm:text-sm focus:border-danger focus:ring-danger" required="" aria-describedby="hs-validation-name-error-helper">
<div class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
<i class="icon icon-octagon-alert text-danger"></i>
</div>
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Rounded Input</label>
<input type="text" class="form-input px-4.5 block w-full bg-white border-border-color rounded-full focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="Rounded Input">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Placeholder</label>
<input type="text" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Disabled</label>
<input type="text" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none cursor-not-allowed" placeholder="Disabled" readonly="">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Readonly</label>
<input type="text" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none cursor-not-allowed" placeholder="Readonly" readonly="">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Value</label>
<input type="text" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="" value="Value">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Textarea</label>
<textarea class="py-2.5 px-2.5 sm:py-2.5 sm:px-2.5 block w-full bg-light border-border-color rounded-lg sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" rows="3" placeholder="This is a textarea placeholder"></textarea>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Select</label>
<select class="py-3 px-4 pe-9 block w-full bg-light border-border-color rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">
<option selected="">Open this select menu</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
Input Types
<div class="preview-content grid grid-cols-1 lg:grid-cols-3">
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Email</label>
<input type="email" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="email@xyz.com">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Password</label>
<div class="relative">
<input id="hs-toggle-password" type="password" class="form-input bg-white pe-10 block w-full border-border-color rounded-lg sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" placeholder="Enter password" value="12345qwerty">
<button type="button" data-hs-toggle-password='{ "target": "#hs-toggle-password" }' class="absolute inset-y-0 end-0 flex items-center z-20 px-3 cursor-pointer rounded-e-md focus:outline-hidden focus:text-blue-600">
<i class="icon icon-eye hidden hs-password-active:block"></i>
<i class="icon icon-eye-off hs-password-active:hidden"></i>
</button>
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">File</label>
<input type="file" name="file-input" id="file-input" class="block w-full bg-light border border-border-color shadow-sm rounded-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none file:bg-light file:border-0 file:me-4 file:py-1.75 file:px-3 dark:file:bg-gray-200 dark:file:text-dark">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Url</label>
<input type="url" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="http://example.com">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Tel</label>
<input type="url" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="+1100-2031-1233">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Date</label>
<input type="date" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Month</label>
<input type="month" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Week</label>
<input type="week" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Time</label>
<input type="time" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Date Time Local</label>
<input type="datetime-local" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Color picker</label>
<input type="color" class="form-input h-9 block w-full bg-light border border-border-color cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="hs-color-input" value="#2563eb" title="Choose your color">
</div>
</div>
Input Group
@
@example.com
https://example.com/users/
$
$0.00
$.00
<div class="preview-content grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
<div class="input-group flex items-center">
<span class="border bg-light border-border-color rounded-l-lg form-input">@</span>
<input type="text" class="form-input bg-white border-border-color rounded-r-lg block w-full placeholder:text-gray-400" placeholder="Username">
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Right</label>
<div class="input-group flex items-center">
<input type="text" class="form-input bg-white border-border-color rounded-s-lg block w-full placeholder:text-gray-400" placeholder="Recipient's">
<span class="border bg-light border-border-color rounded-e-lg form-input">@example.com</span>
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">URL Example</label>
<div class="input-group flex items-center">
<span class="border bg-light border-border-color rounded-l-lg form-input">https://example.com/users/</span>
<input type="text" class="form-input bg-white border-border-color rounded-r-lg block w-full placeholder:text-gray-400" placeholder="">
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
<div class="input-group flex items-center">
<span class="border bg-light border-border-color rounded-l-lg form-input">$</span>
<input type="text" class="form-input bg-white border-border-color rounded-r-lg block w-full placeholder:text-gray-400" placeholder="123">
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
<div class="input-group flex items-center">
<span class="border bg-light border-border-color rounded-l-lg form-input">$</span>
<span class="border bg-light border-border-color form-input">0.00</span>
<input type="text" class="form-input bg-white border-border-color rounded-r-lg block w-full placeholder:text-gray-400" placeholder="123">
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
<div class="input-group flex items-center">
<span class="border bg-light border-border-color rounded-l-lg form-input">$</span>
<input type="text" class="form-input bg-white border-border-color block w-full placeholder:text-gray-400" placeholder="123">
<span class="border bg-light border-border-color rounded-r-lg form-input">.00</span>
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
<div class="flex rounded-lg">
<span class="form-input inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-border-color bg-light">
<span class="flex">
<input type="checkbox" class="shrink-0 border-border-color rounded-sm text-info focus:ring-info dark:checked:bg-info dark:checked:border-info" id="hs-input-group-with-checkbox">
<label for="hs-input-group-with-checkbox" class="sr-only">Checkbox</label>
</span>
</span>
<input type="text" name="hs-input-with-add-on-url-checkbox" id="hs-input-with-add-on-url-checkbox" class="form-input pe-11 block w-full border-border-color rounded-e-lg sm:text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" placeholder="Checkbox">
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
<div class="flex rounded-lg">
<span class="px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-border-color bg-light">
<span class="flex">
<input type="radio" class="shrink-0 border-border-color rounded-full text-blue-600 focus:ring-blue-500 dark:checked:bg-blue-500 dark:checked:border-blue-500" id="hs-input-group-with-radio">
<label for="hs-input-group-with-radio" class="sr-only">Radio</label>
</span>
</span>
<input type="text" name="hs-input-with-add-on-url-radio" id="hs-input-with-add-on-url-radio" class="form-input pe-11 block w-full border-border-color rounded-e-lg sm:text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" placeholder="Radio">
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
<div class="flex rounded-lg">
<button type="button" class="form-input inline-flex rounded-s-lg rounded-none justify-center items-center gap-2 border border-border-color font-medium bg-white shadow-2xs align-middle hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:text-white transition-all text-sm">
Button
</button>
<input type="text" id="hs-trailing-button-add-on-multiple-add-ons" name="hs-trailing-button-add-on-multiple-add-ons" class="form-input block w-full border-border-color rounded-e-lg sm:text-sm focus:z-10 focus:ring-0 focus:ring-primary">
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
<div class="flex rounded-lg">
<button type="button" class="form-input inline-flex rounded-s-lg rounded-none justify-center items-center gap-2 border border-border-color font-medium bg-white shadow-2xs align-middle hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:text-white transition-all text-sm">
Button
</button>
<button type="button" class="form-input inline-flex rounded-none justify-center items-center gap-2 border border-border-color font-medium bg-white shadow-2xs align-middle hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:text-white transition-all text-sm">
Button
</button>
<input type="text" id="hs-trailing-button-add-on-multiple-add-ons" name="hs-trailing-button-add-on-multiple-add-ons" class="form-input block w-full border-border-color rounded-e-lg sm:text-sm focus:z-10 focus:ring-0 focus:ring-primary">
</div>
</div>
<div class="mb-4">
<label for="hs-inline-leading-select-label" class="block text-sm font-medium mb-2 dark:text-white">Phone number</label>
<div class="relative">
<input type="text" id="hs-inline-leading-select-label" name="inline-add-on" class="py-2.5 sm:py-3 px-4 ps-40 block w-full border-border-color rounded-lg sm:text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" placeholder="+1 (000) 000-0000">
<div class="absolute inset-y-0 start-0 flex items-center ps-px">
<label for="hs-inline-leading-select-country" class="sr-only">Country</label>
<select id="hs-inline-leading-select-country" name="hs-inline-leading-select-country" class="block w-full border-transparent rounded-lg focus:ring-blue-600 focus:border-blue-600">
<option>Dropdown</option>
<option>Dropdown 1</option>
<option>Dropdown 2</option>
</select>
</div>
</div>
</div>
<div class="mb-4">
<label for="hs-inline-leading-select-label" class="block text-sm font-medium mb-2 dark:text-white">Phone number</label>
<div class="relative">
<input type="text" id="hs-inline-leading-select-label" name="inline-add-on" class="py-2.5 sm:py-3 px-4 pe-40 block w-full border-border-color rounded-lg sm:text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" placeholder="+1 (000) 000-0000">
<div class="absolute inset-y-0 end-0 flex items-center ps-px">
<label for="hs-inline-leading-select-country" class="sr-only">Country</label>
<select id="hs-inline-leading-select-country" name="hs-inline-leading-select-country" class="block w-full border-transparent rounded-lg focus:ring-blue-600 focus:border-blue-600">
<option>Dropdown</option>
<option>Dropdown 1</option>
<option>Dropdown 2</option>
</select>
</div>
</div>
</div>
</div>
Checks, Radios and Switches
<div class="preview-content grid grid-cols-1 gap-6">
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Default Checkboxes</label>
<div class="inline-flex gap-6 mb-4">
<div class="input-group flex items-center gap-2">
<input type="checkbox" class="shrink-0 border-border-color rounded-sm text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="custom-one" checked>
<label for="custom-one">Check this custom checkbox</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="checkbox" class="shrink-0 border-border-color rounded-sm text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="custom-two">
<label for="custom-two">Check this custom checkbox</label>
</div>
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Colored Checkboxes</label>
<div class="inline-flex gap-6 mb-4">
<div class="input-group flex items-center gap-2">
<input type="checkbox" class="shrink-0 border-border-color rounded-sm text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="primary" checked>
<label for="primary">Primary</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="checkbox" class="shrink-0 border-border-color rounded-sm text-warning focus:ring-warning checked:border-warning disabled:opacity-50 disabled:pointer-events-none" id="warning" checked>
<label for="warning">Warning</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="checkbox" class="shrink-0 border-border-color rounded-sm text-dark focus:ring-dark checked:border-dark disabled:opacity-50 disabled:pointer-events-none" id="dark" checked>
<label for="dark">Dark</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="checkbox" class="shrink-0 border-border-color rounded-sm text-success focus:ring-success checked:border-success disabled:opacity-50 disabled:pointer-events-none" id="success" checked>
<label for="success">Success</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="checkbox" class="shrink-0 border-border-color rounded-sm text-danger focus:ring-danger checked:border-danger disabled:opacity-50 disabled:pointer-events-none" id="danger" checked>
<label for="danger">Danger</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="checkbox" class="shrink-0 border-border-color rounded-sm text-info focus:ring-info checked:border-info disabled:opacity-50 disabled:pointer-events-none" id="info" checked>
<label for="info">Info</label>
</div>
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Radio</label>
<div class="inline-flex gap-6 mb-4">
<div class="input-group flex items-center gap-2">
<input type="radio" name="custom-radio" class="shrink-0 border-border-color rounded-full text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="radio-custom-one" checked>
<label for="radio-custom-one">Toggle this custom radio</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="radio" name="custom-radio" class="shrink-0 border-border-color rounded-full text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="radio-custom-two">
<label for="radio-custom-two">Or toggle this other custom radio</label>
</div>
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Radio</label>
<div class="inline-flex gap-6 mb-4">
<div class="input-group flex items-center gap-2">
<input type="radio" class="shrink-0 border-border-color rounded-full text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="radio-primary" checked>
<label for="radio-primary">Primary</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="radio" class="shrink-0 border-border-color rounded-full text-warning focus:ring-warning checked:border-warning disabled:opacity-50 disabled:pointer-events-none" id="radio-warning" checked>
<label for="radio-warning">Warning</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="radio" class="shrink-0 border-border-color rounded-full text-dark focus:ring-dark checked:border-dark disabled:opacity-50 disabled:pointer-events-none" id="radio-dark" checked>
<label for="radio-dark">Dark</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="radio" class="shrink-0 border-border-color rounded-full text-success focus:ring-success checked:border-success disabled:opacity-50 disabled:pointer-events-none" id="radio-success" checked>
<label for="radio-success">Success</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="radio" class="shrink-0 border-border-color rounded-full text-danger focus:ring-danger checked:border-danger disabled:opacity-50 disabled:pointer-events-none" id="radio-danger" checked>
<label for="radio-danger">Danger</label>
</div>
<div class="input-group flex items-center gap-2">
<input type="radio" class="shrink-0 border-border-color rounded-full text-info focus:ring-info checked:border-info disabled:opacity-50 disabled:pointer-events-none" id="radio-info" checked>
<label for="radio-info">Info</label>
</div>
</div>
</div>
<div class="mb-4">
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Radio</label>
<div class="inline-flex gap-6 mb-4">
<div class="flex items-center gap-2">
<label for="custom-switch-one" class="relative inline-block w-8 h-5 cursor-pointer">
<input type="checkbox" id="custom-switch-one" class="peer sr-only" checked>
<span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary dark:peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
</label>
<label for="custom-switch-one">Default switch checkbox input</label>
</div>
<div class="flex items-center gap-2">
<label for="custom-switch-two" class="relative inline-block w-8 h-5 cursor-pointer">
<input type="checkbox" id="custom-switch-two" class="peer sr-only">
<span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary dark:peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
</label>
<label for="custom-switch-two">Default switch checkbox input</label>
</div>
</div>
</div>
<div>
<label for="input-label" class="block text-sm font-medium mb-2 text-dark">Radio</label>
<div class="inline-flex gap-6">
<div class="flex items-center gap-2">
<label for="primary-switch" class="relative inline-block w-8 h-5 cursor-pointer">
<input type="checkbox" id="primary-switch" class="peer sr-only" checked>
<span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary dark:peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
</label>
<label for="primary-switch">Primary</label>
</div>
<div class="flex items-center gap-2">
<label for="warning-switch" class="relative inline-block w-8 h-5 cursor-pointer">
<input type="checkbox" id="warning-switch" class="peer sr-only" checked>
<span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-warning dark:peer-checked:bg-warning peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
</label>
<label for="warning-switch">Warning</label>
</div>
<div class="flex items-center gap-2">
<label for="dark-switch" class="relative inline-block w-8 h-5 cursor-pointer">
<input type="checkbox" id="dark-switch" class="peer sr-only" checked>
<span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-dark dark:peer-checked:bg-dark peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
</label>
<label for="dark-switch">Dark</label>
</div>
<div class="flex items-center gap-2">
<label for="success-switch" class="relative inline-block w-8 h-5 cursor-pointer">
<input type="checkbox" id="success-switch" class="peer sr-only" checked>
<span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-success dark:peer-checked:bg-success peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
</label>
<label for="success-switch">Success</label>
</div>
<div class="flex items-center gap-2">
<label for="danger-switch" class="relative inline-block w-8 h-5 cursor-pointer">
<input type="checkbox" id="danger-switch" class="peer sr-only" checked>
<span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-danger dark:peer-checked:bg-danger peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
</label>
<label for="danger-switch">Danger</label>
</div>
<div class="flex items-center gap-2">
<label for="info-switch" class="relative inline-block w-8 h-5 cursor-pointer">
<input type="checkbox" id="info-switch" class="peer sr-only" checked>
<span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-info dark:peer-checked:bg-info peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
</label>
<label for="info-switch">Info</label>
</div>
</div>
</div>
</div>