Application toolkit - Switch
A toggle is used to view or switch between enabled or disabled states.
Basic
The default form of a toggle.
Open this basic switch example in new window
Copy basic switch code
Close basic switch code
<input type="checkbox" id="hs-basic-usage" class="relative w-[3.25rem] h-7 bg-gray-100 text-hs2-primary-600 checked:bg-none checked:bg-hs2-primary-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-hs2-primary-600 focus:ring-hs2-primary-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-primary-600 dark:focus:ring-offset-hs2-primary-600
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200">
<label for="hs-basic-usage" class="sr-only">switch</label>With description
The basic usage with description.
Open this with description switch example in new window
Copy with description switch code
Close with description switch code
<div class="flex flex-col gap-4">
<div class="flex items-center">
<input type="checkbox" id="hs-basic-with-description-unchecked" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 text-hs2-primary-600 checked:bg-none checked:bg-hs2-primary-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-hs2-primary-600 focus:ring-hs2-primary-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-primary-600 dark:focus:ring-offset-gray-800
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200">
<label for="hs-basic-with-description-unchecked" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Unchecked</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="hs-basic-with-description-checked" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 text-hs2-primary-600 checked:bg-none checked:bg-hs2-primary-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-hs2-primary-600 focus:ring-hs2-primary-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-primary-600 dark:focus:ring-offset-gray-800
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200" checked>
<label for="hs-basic-with-description-checked" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Checked</label>
</div>
<div class="flex items-center">
<label class="text-sm text-gray-500 mr-3 dark:text-gray-400">Off</label>
<input type="checkbox" id="hs-basic-with-description" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 text-hs2-primary-600 checked:bg-none checked:bg-hs2-primary-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-hs2-primary-600 focus:ring-hs2-primary-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-primary-600 dark:focus:ring-offset-gray-800
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200">
<label class="text-sm text-gray-500 ml-3 dark:text-gray-400">On</label>
</div>
</div>Disabled
Disabled switch.
Open this disabled switch example in new window
Copy disabled switch code
Close disabled switch code
<div class="flex flex-col gap-4">
<div class="flex items-center opacity-50">
<input type="checkbox" id="hs-basic-disabled-with-description-unchecked" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-hs2-primary-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent pointer-events-none ring-1 ring-transparent focus:border-hs2-primary-600 focus:ring-hs2-primary-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-primary-600 dark:focus:ring-offset-gray-800
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200" disabled>
<label for="hs-basic-disabled-with-description-unchecked" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Unchecked</label>
</div>
<div class="flex items-center opacity-50">
<input type="checkbox" id="hs-basic-disabled-with-description-checked" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-hs2-primary-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent pointer-events-none ring-1 ring-transparent focus:border-hs2-primary-600 focus:ring-hs2-primary-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-primary-600 dark:focus:ring-offset-gray-800
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200" checked disabled>
<label for="hs-basic-disabled-with-description-checked" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Checked</label>
</div>
<div class="flex items-center opacity-50">
<label class="text-sm text-gray-500 mr-3 dark:text-gray-400">Off</label>
<input type="checkbox" id="hs-basic-disabled-with-description" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-hs2-primary-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent pointer-events-none ring-1 ring-transparent focus:border-hs2-primary-600 focus:ring-hs2-primary-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-primary-600 dark:focus:ring-offset-gray-800
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200" disabled>
<label class="text-sm text-gray-500 ml-3 dark:text-gray-400">On</label>
</div>
</div>With tooltip
In this example we have added a tooltip to the switcher.
Open this with tooltip switch example in new window
Copy with tooltip switch code
Close with tooltip switch code
<div class="hs-tooltip flex items-center">
<input type="checkbox" id="hs-tooltip-example" class="hs-tooltip-toggle relative shrink-0 w-[3.25rem] h-7 bg-gray-100 text-hs2-primary-600 checked:bg-none checked:bg-hs2-primary-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-hs2-primary-600 focus:ring-hs2-primary-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-primary-600 dark:focus:ring-offset-gray-800
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200">
<label for="hs-tooltip-example" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Allow push notifications</label>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
Enable push notifications
</div>
</div>Sizes
Switches stacked small to large sizes.
Open this sizes switch example in new window
Copy sizes switch code
Close sizes switch code
<div class="flex flex-col gap-4">
<div class="flex items-center">
<input type="checkbox" id="hs-small-switch" class="relative shrink-0 w-11 h-6 bg-gray-100 text-hs2-primary-600 checked:bg-none checked:bg-hs2-primary-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-hs2-primary-600 focus:ring-hs2-primary-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-primary-600 dark:focus:ring-offset-gray-800
before:inline-block before:w-5 before:h-5 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200">
<label for="hs-small-switch" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Small</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="hs-medium-switch" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 text-hs2-primary-600 checked:bg-none checked:bg-hs2-primary-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-hs2-primary-600 focus:ring-hs2-primary-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-primary-600 dark:focus:ring-offset-gray-800
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200">
<label for="hs-medium-switch" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Medium</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="hs-large-switch" class="relative shrink-0 w-[4.25rem] h-9 bg-gray-100 text-hs2-primary-600 checked:bg-none checked:bg-hs2-primary-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-hs2-primary-600 focus:ring-hs2-primary-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-primary-600 dark:focus:ring-offset-gray-800
before:inline-block before:w-8 before:h-8 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200">
<label for="hs-large-switch" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Large</label>
</div>
</div>Validation states
It provides valuable, actionable feedback to your users with HTML5 form validation.
Open this validation states switch example in new window
Copy validation states switch code
Close validation states switch code
<div class="flex flex-col gap-4">
<div class="flex items-center">
<input type="checkbox" id="hs-valid-toggle-switch" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-hs2-success border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent checked:hover:bg-hs2-success checked:focus:bg-hs2-success focus:border-hs2-success focus:ring-hs2-success ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-success dark:focus:ring-offset-gray-800
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-green-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-green-200" checked>
<label for="hs-valid-toggle-switch" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Valid switch</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="hs-invalid-toggle-switch" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-hs2-danger border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent checked:hover:bg-hs2-danger checked:focus:bg-hs2-danger focus:border-hs2-danger focus:ring-hs2-danger ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-hs2-danger dark:focus:ring-offset-gray-800
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-red-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-red-200" checked>
<label for="hs-invalid-toggle-switch" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Invalid switch</label>
</div>
</div>