Input

Image + CodePen

Example Usage

<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