Qwik toggle - Flowbite

Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors

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

To use the range component, you need to import it from flowbite-qwik :

import { Toggle } from "flowbite-qwik"

Default Toggle

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

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Toggle } from 'flowbite-qwik'

export default component$(() => {
  const toggleValue = useSignal(false)

  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Toggle label="Toggle me" bind:checked={toggleValue} />
    </div>
  )
})

Checked Toggle

Apply the checked attribute to the toggle component to activate the selection by default.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Toggle } from 'flowbite-qwik'

export default component$(() => {
  const checkedToggleValue = useSignal(true)

  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Toggle label="Toggle me" bind:checked={checkedToggleValue} />
    </div>
  )
})

Disabled state

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

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Toggle } from 'flowbite-qwik'

export default component$(() => {
  const checkedToggleValue = useSignal(true)
  const toggleValue = useSignal(false)

  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Toggle label="Disabled toggle" disabled bind:checked={toggleValue} />
      <Toggle label="Disabled checked" disabled bind:checked={checkedToggleValue} />
    </div>
  )
})

Colors

You can customize the toggle component with different colors.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Toggle } from 'flowbite-qwik'

export default component$(() => {
  const checkedToggleValue = useSignal(true)

  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Toggle label="Red" color="red" bind:checked={checkedToggleValue} />
      <Toggle label="Green" color="green" bind:checked={checkedToggleValue} />
      <Toggle label="Yellow" color="yellow" bind:checked={checkedToggleValue} />
      <Toggle label="Orange" color="orange" bind:checked={checkedToggleValue} />
      <Toggle label="Teal" color="teal" bind:checked={checkedToggleValue} />
    </div>
  )
})

Sizes

You can customize the toggle component with different sizes.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Toggle } from 'flowbite-qwik'

export default component$(() => {
  const checkedToggleValue = useSignal(true)

  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Toggle label="Small" size="sm" bind:checked={checkedToggleValue} />
      <Toggle label="Medium" size="md" bind:checked={checkedToggleValue} />
      <Toggle label="Large" size="lg" bind:checked={checkedToggleValue} />
    </div>
  )
})