Switch

Variant

Default

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input checked="{true}" class="switch bw" type="checkbox" />
	<input checked="{true}" class="switch success" type="checkbox" />
	<input checked="{true}" class="switch warn" type="checkbox" />
	<input checked="{true}" class="switch danger" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='switch bw'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch warn'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch danger'
    type='checkbox' />
</div>

Bordered

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input class="switch bordered bw" type="checkbox" />
	<input class="switch bordered success" type="checkbox" />
	<input class="switch bordered warn" type="checkbox" />
	<input class="switch bordered danger" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input className='switch bordered bw'
    type='checkbox' />
  <input className='switch bordered success'
    type='checkbox' />
  <input className='switch bordered warn'
    type='checkbox' />
  <input className='switch bordered danger'
    type='checkbox' />
</div>

Ghost

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input class="switch ghost bw" type="checkbox" />
	<input class="switch ghost success" type="checkbox" />
	<input class="switch ghost warn" type="checkbox" />
	<input class="switch ghost danger" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input className='switch ghost bw'
    type='checkbox' />
  <input className='switch ghost success'
    type='checkbox' />
  <input className='switch ghost warn'
    type='checkbox' />
  <input className='switch ghost danger'
    type='checkbox' />
</div>

Size

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input checked="{true}" class="switch success xs" type="checkbox" />
	<input checked="{true}" class="switch success sm" type="checkbox" />
	<input checked="{true}" class="switch success md" type="checkbox" />
	<input checked="{true}" class="switch success lg" type="checkbox" />
	<input checked="{true}" class="switch success xl" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='switch success xs'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success sm'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success md'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success lg'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success xl'
    type='checkbox' />
</div>

Shape

Default shape is circled. And accepts the following options:

square

Square

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input checked="{true}" class="switch success xs square" type="checkbox" />
	<input checked="{true}" class="switch success sm square" type="checkbox" />
	<input checked="{true}" class="switch success md square" type="checkbox" />
	<input checked="{true}" class="switch success lg square" type="checkbox" />
	<input checked="{true}" class="switch success xl square" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='switch success xs square'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success sm square'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success md square'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success lg square'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success xl square'
    type='checkbox' />
</div>

Disabled

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input class="switch success" disabled="{true}" type="checkbox" />
	<input
		checked="{true}"
		class="switch success"
		disabled="{true}"
		type="checkbox"
	/>
</div>

<div className='flex gap-4'>
  <input className='switch success'
    disabled={true}
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success'
    disabled={true}
    type='checkbox' />
</div>

Custom content

And you can customize the content of switch slider. Just add the data-content attribute on it.

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input
		checked="{true}"
		class="switch success xs"
		data-content="✓"
		type="checkbox"
	/>
	<input
		checked="{true}"
		class="switch success sm"
		data-content="a"
		type="checkbox"
	/>
	<input
		checked="{true}"
		class="switch success md"
		data-content="★"
		type="checkbox"
	/>
	<input
		checked="{true}"
		class="switch success lg"
		data-content="☀"
		type="checkbox"
	/>
	<input
		checked="{true}"
		class="switch success xl"
		data-content="💪"
		type="checkbox"
	/>
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='switch success xs'
    data-content='✓'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success sm'
    data-content='a'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success md'
    data-content='★'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success lg'
    data-content='☀'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success xl'
    data-content='💪'
    type='checkbox' />
</div>

Steps Table