Switch/Toggle

#Overview

Switches, in FlyonUI, or toggles, in DaisyUI, are in fact the same control. They allow you to switch between 2 states, similarly to checkboxes.

Title
Helper text 
<x-toggle title="Title" helper="Helper text" color="primary">
  <x-slot:label>Label</x-slot:label>
  <x-slot:label-checked>Label <span class="text-xs">(checked)</span></x-slot:label-checked>
</x-toggle>

#Variants

Usual theming is available with the color attribute.

<x-switch                   label="Default"   checked/>
<x-switch color="primary"   label="Primary"   checked/>
<x-switch color="secondary" label="Secondary" checked/>
<x-switch color="accent"    label="Accent"    checked/>
<x-switch color="info"      label="Info"      checked/>
<x-switch color="success"   label="Success"   checked/>
<x-switch color="warning"   label="Warning"   checked/>
<x-switch color="error"     label="Error"     checked/>

Sizes

Changing toggles' sizes is possible with the size={xl|lg|md|sm|xs} attribute.

<x-toggle size="xl" label="Huge"/>
<x-toggle size="lg" label="Large"/>
<x-toggle size="md" label="Medium"/>
<x-toggle size="sm" label="Small"/>
<x-toggle size="xs" label="Tiny"/>

#Title and Label

#Default

Each toggle can have a title attribute to show above it. It is also common to have some text next to the toggle control. Use the label attribute/slot for this, and the optional label-checked attribute/slot for the label that must be shown when the control is checked.

Terms and conditions
<x-toggle title="Terms and conditions">
  <x-slot:label>
	To continue, you must accept <a class="underline hover:decoration-primary" onclick="alert('There is no real disclaimer here')">the disclaimer</a>
  </x-slot:label>
  <x-slot:label-checked>
	I have read and I accept the disclaimer
  </x-slot:label-checked>
</x-toggle>

If you do use label and label-checked together, the toggle will ensure both can be shown without any layout resizing. This is more visible in the next example.

#Labels before the toggle

Using label-before, you can place the label before the toggle rather than after it. In that configuration, the label-checked is placed to the left too and the toggle accomodates space for the longer label.

If you have several toggles in a column, you must ensure they are aligned to the right.

<div class="flex flex-col items-end gap-4">
<x-toggle label-before="Label placed with an attribute"/>

<x-toggle>
  <x-slot:label-before>
	Label placed with a <code class="bg-neutral-200 p-1 rounded-sm">label-before</code> slot
  </x-slot:label-before>
  <x-slot:label-checked>
	The <code class="bg-neutral-200 p-1 rounded-sm">label-checked</code> gets placed to the left too.
  </x-slot:label-checked>
</x-toggle>
</div>

Note that trying to define a label both before and after the toggle will throw an exception.

#State-dependent labels

Using label-checked, it is possible to make the label display either of 2 values whenever the state changes.

<x-toggle label="Unchecked" label-checked="Checked"/>
<x-toggle label-before="Unchecked" label-checked="Checked"/>