Toggles

Use a toggle when you need to switch between two possible states, like an "on/off" switch.


Elements CSS doesn’t include pre-designed components out of the box, but they’re easy to build using existing utilities.

Toggles should be consistent across all Q-CTRL’s products as such they should follow the guidelines in Elements Design Library. The follow examples show you how to acheive this using Elements CSS utility classes.


# Sizes

Toggles come in four different sizes by using w-*, 'h-* and bg-* classes.

Requires JS
<!-- Extra Small -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: true }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-10 h-5 p-0.5 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="true">
<span class="sr-only">Extra Small</span>
<!-- Enabled: "translate-x-5 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-5 shadow-xs': on }" class="inline-block w-4 h-4 -m-px bg-current pointer-events-none rounded-full transform translate-x-5 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Small -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-13 h-6 p-0.5 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Small</span>
<!-- Enabled: "translate-x-7 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-7 shadow-xs': on }" class="inline-block w-5 h-5 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Medium -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Medium</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Large -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-20 h-10 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Large</span>
<!-- Enabled: "translate-x-10 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-10 shadow-xs': on }" class="inline-block w-8 h-8 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

# Error state

Make Toggles look invalid by adding the error boolean attribute to the <button> element.

Requires JS
<!-- Extra Small -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: true }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-10 h-5 p-0.5 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="true" error>
<span class="sr-only">Extra Small</span>
<!-- Enabled: "translate-x-5 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-5 shadow-xs': on }" class="inline-block w-4 h-4 -m-px bg-current pointer-events-none rounded-full transform translate-x-5 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Small -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-13 h-6 p-0.5 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false" error>
<span class="sr-only">Small</span>
<!-- Enabled: "translate-x-7 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-7 shadow-xs': on }" class="inline-block w-5 h-5 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Medium -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false" error>
<span class="sr-only">Medium</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Large -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-20 h-10 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false" error>
<span class="sr-only">Large</span>
<!-- Enabled: "translate-x-10 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-10 shadow-xs': on }" class="inline-block w-8 h-8 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

# Success state

Make Toggles look valid by adding the success boolean attribute to the <button> element.

Requires JS
<!-- Extra Small -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: true }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-10 h-5 p-0.5 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="true" success>
<span class="sr-only">Extra Small</span>
<!-- Enabled: "translate-x-5 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-5 shadow-xs': on }" class="inline-block w-4 h-4 -m-px bg-current pointer-events-none rounded-full transform translate-x-5 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Small -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-13 h-6 p-0.5 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false" success>
<span class="sr-only">Small</span>
<!-- Enabled: "translate-x-7 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-7 shadow-xs': on }" class="inline-block w-5 h-5 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Medium -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false" success>
<span class="sr-only">Medium</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Large -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-20 h-10 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false" success>
<span class="sr-only">Large</span>
<!-- Enabled: "translate-x-10 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-10 shadow-xs': on }" class="inline-block w-8 h-8 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

# Disabled state

Make Toggles look inactive by adding the disabled boolean attribute to the <button> element.

Requires JS
<!-- Extra Small -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: true }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-10 h-5 p-0.5 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="true" disabled>
<span class="sr-only">Extra Small</span>
<!-- Enabled: "translate-x-5 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-5 shadow-xs': on }" class="inline-block w-4 h-4 -m-px bg-current pointer-events-none rounded-full transform translate-x-5 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Small -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-13 h-6 p-0.5 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false" disabled>
<span class="sr-only">Small</span>
<!-- Enabled: "translate-x-7 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-7 shadow-xs': on }" class="inline-block w-5 h-5 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Medium -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false" disabled>
<span class="sr-only">Medium</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>
<!-- Large -->
<!-- Enabled: "text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-primary bg-primary bg-opacity-5 border-primary hover:text-primary-light hover:border-primary-dark focus:border-primary focus:hover:border-primary-light active:focus:text-primary-dark active:focus:border-primary-dark': on }" class="group relative inline-flex flex-shrink-0 w-20 h-10 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false" disabled>
<span class="sr-only">Large</span>
<!-- Enabled: "translate-x-10 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-10 shadow-xs': on }" class="inline-block w-8 h-8 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

# Colors

Toggles are also available in the base colors.

ColorSizesStates

Violet

Magenta

Blue

Teal

Green

Yellow

Orange

Red

Pink

<!-- Violet -->
<!-- Enabled: "text-violet bg-violet bg-opacity-5 border-violet hover:text-violet-200 hover:border-violet-400 focus:border-violet focus:hover:border-violet-200 active:focus:text-violet-400 active:focus:border-violet-400", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-violet bg-violet bg-opacity-5 border-violet hover:text-violet-200 hover:border-violet-400 focus:border-violet focus:hover:border-violet-200 active:focus:text-violet-400 active:focus:border-violet-400': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-violet focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

<!-- Magenta -->
<!-- Enabled: "text-magenta bg-magenta bg-opacity-5 border-magenta hover:text-magenta-200 hover:border-magenta-400 focus:border-magenta focus:hover:border-magenta-200 active:focus:text-magenta-400 active:focus:border-magenta-400", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-magenta bg-magenta bg-opacity-5 border-magenta hover:text-magenta-200 hover:border-magenta-400 focus:border-magenta focus:hover:border-magenta-200 active:focus:text-magenta-400 active:focus:border-magenta-400': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-magenta focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

<!-- Blue -->
<!-- Enabled: "text-blue bg-blue bg-opacity-5 border-blue hover:text-blue-200 hover:border-blue-400 focus:border-blue focus:hover:border-blue-200 active:focus:text-blue-400 active:focus:border-blue-400", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-blue bg-blue bg-opacity-5 border-blue hover:text-blue-200 hover:border-blue-400 focus:border-blue focus:hover:border-blue-200 active:focus:text-blue-400 active:focus:border-blue-400': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-blue focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

<!-- Teal -->
<!-- Enabled: "text-teal bg-teal bg-opacity-5 border-teal hover:text-teal-200 hover:border-teal-400 focus:border-teal focus:hover:border-teal-200 active:focus:text-teal-400 active:focus:border-teal-400", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-teal bg-teal bg-opacity-5 border-teal hover:text-teal-200 hover:border-teal-400 focus:border-teal focus:hover:border-teal-200 active:focus:text-teal-400 active:focus:border-teal-400': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-teal focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

<!-- Green -->
<!-- Enabled: "text-green bg-green bg-opacity-5 border-green hover:text-green-200 hover:border-green-400 focus:border-green focus:hover:border-green-200 active:focus:text-green-400 active:focus:border-green-400", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-green bg-green bg-opacity-5 border-green hover:text-green-200 hover:border-green-400 focus:border-green focus:hover:border-green-200 active:focus:text-green-400 active:focus:border-green-400': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-green focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

<!-- Yellow -->
<!-- Enabled: "text-yellow bg-yellow bg-opacity-5 border-yellow hover:text-yellow-200 hover:border-yellow-400 focus:border-yellow focus:hover:border-yellow-200 active:focus:text-yellow-400 active:focus:border-yellow-400", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-yellow bg-yellow bg-opacity-5 border-yellow hover:text-yellow-200 hover:border-yellow-400 focus:border-yellow focus:hover:border-yellow-200 active:focus:text-yellow-400 active:focus:border-yellow-400': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-yellow focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

<!-- Orange -->
<!-- Enabled: "text-orange bg-orange bg-opacity-5 border-orange hover:text-orange-200 hover:border-orange-400 focus:border-orange focus:hover:border-orange-200 active:focus:text-orange-400 active:focus:border-orange-400", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-orange bg-orange bg-opacity-5 border-orange hover:text-orange-200 hover:border-orange-400 focus:border-orange focus:hover:border-orange-200 active:focus:text-orange-400 active:focus:border-orange-400': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-orange focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

<!-- Red -->
<!-- Enabled: "text-red bg-red bg-opacity-5 border-red hover:text-red-200 hover:border-red-400 focus:border-red focus:hover:border-red-200 active:focus:text-red-400 active:focus:border-red-400", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-red bg-red bg-opacity-5 border-red hover:text-red-200 hover:border-red-400 focus:border-red focus:hover:border-red-200 active:focus:text-red-400 active:focus:border-red-400': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-red focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>

<!-- Pink -->
<!-- Enabled: "text-pink bg-pink bg-opacity-5 border-pink hover:text-pink-200 hover:border-pink-400 focus:border-pink focus:hover:border-pink-200 active:focus:text-pink-400 active:focus:border-pink-400", Not Enabled: "bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400 -->
<button type="button" tabindex="0" x-data="{ on: false }" @keydown.space.prevent="on = !on" x-on:click="on = !on" aria-checked="false" :aria-checked="on.toString()" x-bind:class="{ 'bg-white text-gray-200 border-gray-200 hover:text-gray-300 hover:border-gray-300 focus:border-gray-300 focus:hover:border-gray-400': !on, 'text-pink bg-pink bg-opacity-5 border-pink hover:text-pink-200 hover:border-pink-400 focus:border-pink focus:hover:border-pink-200 active:focus:text-pink-400 active:focus:border-pink-400': on }" class="group relative inline-flex flex-shrink-0 w-16 h-8 p-1 bg-white text-gray-200 border border-gray-200 rounded-full shadow-inner-sm cursor-pointer transition-colors ease-in-out duration-200 hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-pink focus:ring-opacity-20 focus:border-gray-300 focus:hover:border-gray-40 active:focus:text-gray-400 disabled:bg-gray-0 disabled:border-gray-200 disabled:text-gray-200 disabled:shadow-none disabled:cursor-not-allowed error:border-danger error:text-danger error:bg-white error:ring-danger error:ring-opacity-15 focus:error:border-danger-dark active:focus:error:text-danger-dark success:border-success success:text-success success:bg-white success:ring-success success:ring-opacity-15 focus:success:border-success-dark active:focus:success:text-success-dark" role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<!-- Enabled: "translate-x-8 shadow-none", Not Enabled: "translate-x-0 shadow-xs" -->
<span aria-hidden="true" x-bind:class="{ 'translate-x-0 shadow-none': !on, 'translate-x-8 shadow-xs': on }" class="inline-block w-6 h-6 -m-px bg-current pointer-events-none rounded-full transform translate-x-0 transition-transform ease-in-out duration-200 ring-0 group-disabled:shadow-none"></span>
</button>