# Input

## Image + CodePen

## Example Usage

```jsx
<vui-form-wrapper>
  <vui-form-row>
    <vui-input
      name="firstName"
      label="First Name"
      placeholder="e.g. John"
      autocomplete="fname"
      @handleInput="handleInput"
    />
    <vui-input
      name="lastName"
      label="Last Name"
      placeholder="e.g. Skubala"
      autocomplete="lname"
      outline
      @handleInput="handleInput"
    />
  </vui-form-row>

  <vui-form-row>
    <vui-input
      name="testText"
      label="testText"
    />
    <vui-button @click="greet">Do it!</vui-button>
  </vui-form-row>
</vui-form-wrapper>
```

## API

#### Props:

| Name         | Value    | Required | Description                                              |
| ------------ | -------- | -------- | -------------------------------------------------------- |
| name         | String   | true     | Name for input                                           |
| label        | String   | true     | Label above input                                        |
| placeholder  | String   | false    | Placeholder in input                                     |
| autocomplete | String   | false    | This value helps the browser in autocompleting the value |
| outline      | Boolean  | false    | Changes the focus animation on outline version           |
| handlerInput | Function | false    | It's called when the input value is changing             |
