Tailwind CSS Radio Button - Taco Svelte

Our Tailwind CSS radio button component will let your users choose only one of a predefined set of mutually exclusive options. Radio buttons should be used instead of checkboxes if only one item can be selected from a list. 

<Radio 
label="HTML"
value="HTML"
/>
<Radio 
label="svelte"
value="svelte"
/>

Radio Button Colors

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

<Radio 
value="blue"
color="blue"
/>
<Radio 
value="blue"
color="blue"
/>
<Radio 
value="red"
color="red"
/>
<Radio 
value="amber"
color="amber"
/>
<Radio 
value="teal"
color="teal"
/>
<Radio 
value="indigo"
color="indigo"
/>
<Radio 
value="purple"
color="purple"
/>
<Radio 
value="pink"
color="pink"
/>

Radio Button Custom Icon

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

<Radio 
color="blue"
label="Svelte"
value="svelte"
>
<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>
</Radio>
<Radio 
color="red"
label="HTML"
value="html"
>
<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>
</Radio>

Radio Button Ripple Effect

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

<Radio 
name="rippleEffect"
value="dark"
color="blue"
label="Ripple Effect Dark"
ripple="dark"
/>
<Radio 
name="rippleEffect"
value="light"
color="blue"
label="Ripple Effect Light"
ripple="light"
/>
<Radio 
name="rippleEffect"
value="off"
color="blue"
label="Ripple Effect Off"
/>

Custom Radio Button 

<Radio 
  color="red"
  label="HTML"
  ripple=""
  value="HTML"
/>