Tailwind CSS Switch - Taco Vue

Use our Tailwind CSS Switch component to let users adjust settings on/off. 

<Switch 
  color="blue"
  :true-value="true"
  :false-value="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="green"
  :true-value="true"
  :false-value="false"
/>
<Switch 
  color="blue"
  :true-value="true"
  :false-value="false"
/>
<Switch 
  color="red"
  :true-value="true"
  :false-value="false"
/>
<Switch 
  color="amber"
  :true-value="true"
  :false-value="false"
/>
<Switch 
  color="teal"
  :true-value="true"
  :false-value="false"
/>
<Switch 
  color="indigo"
  :true-value="true"
  :false-value="false"
/>
<Switch 
  color="purple"
  :true-value="true"
  :false-value="false"
/>
<Switch 
  color="pink"
  :true-value="true"
  :false-value="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"
  :true-value="true"
  :false-value="false"
/>

Switch Ripple Effect

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

<Switch 
  color="blue"
  :true-value="true"
  :false-value="false"
  label="Ripple Effect Dark"
  ripple="dark"
/>
<Switch 
  color="blue"
  :true-value="true"
  :false-value="false"
  label="Ripple Effect Light"
  ripple="light"
/>
<Switch 
  color="blue"
  :true-value="true"
  :false-value="false"
  label="Ripple Effect Off"
/>

Custom Switch 

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