Tailwind CSS Input - Taco Vue

Input fields are an essential user interface design element, providing users with the means to enter non-standardized responses. Below we are presenting dynamic examples of the Dialog component that you can use in your project based on Taco.

<Input 
  label="Required"
  color="blue"
/>
    

Input Variants

The Input component comes with 3 different variants that you can change it using the variant prop.

<Input 
  label="Outlined"
  color="blue"
  variant="outlined"
/>
<Input 
  label="Standard"
  color="blue"
  variant="standard"
/>
<Input 
  label="Static"
  color="blue"
  variant="static"
/>
    

Input Sizes

The Input component comes with 2 different sizes that you can change it using the size prop.

<Input 
  label="Input Medium"
  color="blue"
  size="md"
/>
<Input 
  label="Input Large"
  color="blue"
  size="lg"
/>
    

Input Colors

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

<Input 
  label="Input Blue"
  color="blue"
/>
<Input 
  label="Input Purple"
  color="purple"
/>
<Input 
  label="Input Indigo"
  color="indigo"
/>
<Input 
  label="Input Teal"
  color="teal"
/>
    

Input Validations

The Input component comes with error and success states for performing validations.

<Input 
  label="Input Error"
  error
/>
<Input 
  label="Input Success"
  success
/>
    

Input With icon

You can add icon for the Input component using the icon prop.

<Input 
  label="Input with icon" 
  color="blue"
>
  <i class="fas fa-heart" />
</Input>
    

Disabled Input

An Input could be disabled as well, it will help you to prevent user interactions like click or focus over the Input component.

<Input 
  label="Disabled" 
  disabled
/>
    

Custom Input

<Input 
  variant="outlined"
  size="md"
  :error="false"
  :success="false"
  label="Input for testing"
  color="blue"
  placeholder=" "
>
</Input>