Tailwind CSS Checkbox - Taco Svelte

Use our Tailwind CSS Checkbox to allow the user to select one or more items from a set. 

<Checkbox 
color="blue"
/>

Checkbox Colors

The Checkbox 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.

<Checkbox 
color="green"
/>
<Checkbox 
color="blue"
/>
<Checkbox 
color="red"
/>
<Checkbox 
color="amber"
/>
<Checkbox 
color="teal"
/>
<Checkbox 
color="indigo"
/>
<Checkbox 
color="purple"
/>
<Checkbox 
color="pink"
/>

Checkbox with Label

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

<Checkbox 
color="blue"
label="Remember Me"
/>

Checkbox Custom Icon

You can add a custom icon for the Checkbox component when it's checked by passing the icon prop to the Checkbox component. 

<Checkbox 
color="blue"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clipRule="evenodd"/></svg>
</Checkbox>

Checkbox Ripple Effect

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

<Checkbox 
color="blue"
ripple="dark"
label="Ripple Effect Dark"
/>
<Checkbox 
color="blue"
ripple="light"
label="Ripple Effect Light"
/>
<Checkbox 
color="blue"
label="Ripple Effect Off"
/>

Custom Checkbox 

<Checkbox 
    color="amber"
    label=""
    ripple=""
>
</Checkbox>