Tailwind CSS Switch - Taco Svelte

Use our Tailwind CSS Switch component to let users adjust settings on/off. The option that the Switch controls, as well as the state it's in, should be made clear from the corresponding inline label. 

<Switch 
color="blue"
trueValue="true"
falseValue="false"
/>

Switch Colors

The Switch component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

<Switch 
color="blue"
trueValue="true"
falseValue="false"
/>
<Switch 
color="blue"
trueValue="true"
falseValue="false"
/>
<Switch 
color="red"
trueValue="true"
falseValue="false"
/>
<Switch 
color="amber"
trueValue="true"
falseValue="false"
/>
<Switch 
color="teal"
trueValue="true"
falseValue="false"
/>
<Switch 
color="indigo"
trueValue="true"
falseValue="false"
/>
<Switch 
color="purple"
trueValue="true"
falseValue="false"
/>
<Switch 
color="pink"
trueValue="true"
falseValue="false"
/>

Switch with Label

You can add a label for the Switch component by passing the label prop to the Switch component. 

<Switch 
color="blue"
label="Automatic Update"
trueValue="true"
falseValue="false"
/>

Switch Ripple Effect

You can turn on/off the ripple effect for the Switch component using the ripple prop. 

<Switch 
color="blue"
trueValue="true"
falseValue="false"
label="Ripple Effect Dark"
ripple="dark"
/>
<Switch 
color="blue"
trueValue="true"
falseValue="false"
label="Ripple Effect Light"
ripple="light"
/>
<Switch 
color="blue"
trueValue="true"
falseValue="false"
label="Ripple Effect Off"
/>

Custom Switch 

<Switch 
    bind:value="all"
    label="Switch component"
    color="blue"
    ripple=""
    true-value="all"
    false-value="upcoming"
/>