Tailwind CSS Input - Taco Svelte

Easily create Input 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"></i>
</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 
      value=""
      variant="outlined"
      size="md"
      error="{false}"
      success="{false}"
      label="Input for testing"
      color="blue"
      placeholder=" "
    >
    </Input>