Toggle

⌘

Displays a switch between a binary state of true or false

Overview

The toggle component can be used to receive a simple “yes” or “no” type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors.

Default

Custom email sender domain

<label htmlFor="default-toggle" className="inline-flex relative items-center cursor-pointer">
  <input type="checkbox" value="" id="default-toggle" className="sr-only peer" />
  <div className="w-10 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-500 dark:peer-focus:ring-blue-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-4 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-white peer-checked:bg-blue-500"></div>
  <span class="ml-3 font-medium dark:text-gray-300">Custom email sender domain</span>
</label>

Checked

Note: Apply the checked or defaultChecked attribute to the toggle component to activate the selection by default.

Custom email sender domain

<label htmlFor="checked-toggle" className="inline-flex relative items-center cursor-pointer">
  <input type="checkbox" value="" id="checked-toggle" className="sr-only peer" defaultChecked />
  <div className="w-10 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-500 dark:peer-focus:ring-blue-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-4 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-white peer-checked:bg-blue-500"></div>
  <span class="ml-3 font-medium dark:text-gray-300">Custom email sender domain</span>
</label>

Disabled

Note: Apply the disabled attribute to disallow the users from making any further selections.

Custom email sender domain

<label htmlFor="disabled-toggle" className="inline-flex relative items-center cursor-not-allowed opacity-50">
  <input type="checkbox" value="" id="disabled-toggle" className="sr-only peer" disabled />
  <div className="w-10 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-500 dark:peer-focus:ring-blue-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-4 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-white peer-checked:bg-blue-500"></div>
  <span class="ml-3 font-medium dark:text-gray-300">Custom email sender domain</span>
</label>

Tones

Note: Change the color of the toggle component by updating the color classes of peer-focus and peer-checked.

Blue

Green

Teal

<label htmlFor="blue-toggle" className="inline-flex relative items-center cursor-pointer">
  <input type="checkbox" value="" id="blue-toggle" className="sr-only peer" defaultChecked />
  <div className="w-10 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-500 dark:peer-focus:ring-blue-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-4 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-white peer-checked:bg-blue-500"></div>
  <span class="ml-3 font-medium dark:text-gray-300">Blue</span>
</label>

<label htmlFor="green-toggle" className="inline-flex relative items-center cursor-pointer">
  <input type="checkbox" value="" id="green-toggle" className="sr-only peer" defaultChecked />
  <div className="w-10 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-500 dark:peer-focus:ring-green-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-4 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-white peer-checked:bg-green-500"></div>
  <span class="ml-3 font-medium dark:text-gray-300">Green</span>
</label>

<label htmlFor="red-toggle" className="inline-flex relative items-center cursor-pointer">
  <input type="checkbox" value="" id="red-toggle" className="sr-only peer" defaultChecked />
  <div className="w-10 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-red-500 dark:peer-focus:ring-red-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-4 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-white peer-checked:bg-red-500"></div>
  <span class="ml-3 font-medium dark:text-gray-300">Red</span>
</label>