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>