Tailwind CSS Radio Button - Taco Vue

Our Taco 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="VUE"
  value="VUE"
/>

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="green"
  color="green"
/>
<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="green"
    label="VUE"
    value="vue"
>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-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="w-3 h-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="blue"
  label="HTML"
  ripple=""
  value="HTML"
/>
<Radio 
  color="green"
  label="VUE"
  ripple=""
  value="VUE"
/>