React Toggle - Flowbite

The <ToggleSwitch> 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 coded with the utility classes from Tailwind CSS and with dark mode support.

To start using the component make sure that you have imported it from Flowbite React:

'use client';

import { ToggleSwitch } from 'flowbite-react';

Table of Contents#

• Toggle Example
• Checked state
• Disabled state
• Colors
• Sizes
• Theme
• References

Toggle Example#

Get started with the default <ToggleSwitch> component example as a checkbox element to receive a true or false selection from the user.

'use client';

import { ToggleSwitch } from 'flowbite-react';

export default function ToggleExample() {
  return (
    <ToggleSwitch
      checked={false}
      label="Toggle Me"
      onChange={function () { [native code] }}
    />
  )
}

Checked state#

Apply the checked attribute to the <ToggleSwitch> component to activate the selection by default.

'use client';

import { ToggleSwitch } from 'flowbite-react';

export default function CheckedToggle() {
  return (
    <div className="inline-flex items-center">
      <ToggleSwitch
        checked
        label="Checked toggle"
        onChange={function () { [native code] }}
      />
    </div>
  )
}

Disabled state#

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

'use client';

import { ToggleSwitch } from 'flowbite-react';

export default function DisabledToggle() {
  return (
    <div className="items-center">
      <div className="mb-4">
        <ToggleSwitch
          disabled
          label="Disabled toggle"
        />
      </div>
      <div>
        <ToggleSwitch
          checked
          disabled
          label="Disabled checked"
        />
      </div>
    </div>
  )
}

Colors#

Change the color of the <ToggleSwitch> component by updating the color prop.

'use client';

import { ToggleSwitch } from 'flowbite-react';

export default function ColorsToggle() {
  return (
    <div className="inline-flex flex-wrap items-center gap-2">
      <ToggleSwitch
        checked
        color="red"
        label="Red"
        onChange={function () { [native code] }}
      />
      <ToggleSwitch
        checked
        color="green"
        label="Green"
        onChange={function () { [native code] }}
      />
      <ToggleSwitch
        checked
        color="purple"
        label="Purple"
        onChange={function () { [native code] }}
      />
      <ToggleSwitch
        checked
        color="yellow"
        label="Yellow"
        onChange={function () { [native code] }}
      />
      <ToggleSwitch
        checked
        color="teal"
        label="Teal"
        onChange={function () { [native code] }}
      />
      <ToggleSwitch
        checked
        color="orange"
        label="Orange"
        onChange={function () { [native code] }}
      />
    </div>
  )
}

Sizes#

Get started with small, default, or large sizes of the <ToggleSwitch> component based on your needs.

'use client';

import { ToggleSwitch } from 'flowbite-react';

export default function SizesToggle() {
  return (
    <div className="items-center">
      <div className="mb-4">
        <ToggleSwitch
          checked={false}
          label="Small toggle"
          onChange={function () { [native code] }}
          sizing="sm"
        />
      </div>
      <div className="mb-4">
        <ToggleSwitch
          checked={false}
          label="Default toggle"
          onChange={function () { [native code] }}
        />
      </div>
      <ToggleSwitch
        checked={false}
        label="Large toggle"
        onChange={function () { [native code] }}
        sizing="lg"
      />
    </div>
  )
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "group relative flex items-center rounded-lg focus:outline-none",
    "active": {
      "on": "cursor-pointer",
      "off": "cursor-not-allowed opacity-50"
    },
    "label": "ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
  },
  "toggle": {
    "base": "toggle-bg rounded-full border group-focus:ring-4 group-focus:ring-cyan-500/25",
    "checked": {
      "on": "after:translate-x-full after:border-white",
      "off": "border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-700",
      "color": {
        "blue": " bg-cyan-700 border-cyan-700",
        "dark": "bg-dark-700 border-dark-900",
        "failure": "bg-red-700 border-red-900",
        "gray": "bg-gray-500 border-gray-600",
        "green": "bg-green-600 border-green-700",
        "light": "bg-light-700 border-light-900",
        "red": "bg-red-700 border-red-900",
        "purple": "bg-purple-700 border-purple-900",
        "success": "bg-green-500 border-green-500",
        "yellow": "bg-yellow-400 border-yellow-400",
        "warning": "bg-yellow-600 border-yellow-600",
        "cyan": "bg-cyan-500 border-cyan-500",
        "lime": "bg-lime-400 border-lime-400",
        "indigo": "bg-indigo-400 border-indigo-400",
        "teal": "bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4",
        "info": "bg-cyan-600 border-cyan-600",
        "pink": "bg-pink-600 border-pink-600",
        "orange": "bg-orange-500 border-orange-500"
      }
    },
    "sizes": {
      "sm": "w-9 h-5 after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4",
      "md": "w-11 h-6 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5",
      "lg": "w-14 h-7 after:absolute after:top-0.5 after:left-[4px] after:h-6 after:w-6"
    }
  }
}

References#

• Flowbite File Input