Appearance

Input ​

Figma

Input let users enter and edit text

Basic Usage ​

value: John Doe

template
<Input label="Name" placeholder="Full name" v-model="name" />

Adjacent content ​

The Input component supports adding content to either the right, using the append slot, or left, using the prepend slot, of the input.

$
%
template
<Input label="Amount">
  <template #prepend>$</template>
</Input>
<Input label="Percent">
  <template #append>%</template>
</Input>

Autocomplete ​

The Input component supports the native autocomplete attribute, allowing or not suggestions from the browser. The default value is off.

template
<Input label="Language" list="languages" autocomplete="on" />
<datalist id="languages">
  <option value="PHP" />
  <option value="C++" />
  <option value="Java" />
  <option value="Ruby" />
  <option value="Python" />
  <option value="Go" />
  <option value="Perl" />
  <option value="Erlang" />
</datalist>

Types ​

The Input component supports the type attribute. The default value is text.

INFO

The usage of types such as checkbox, radio, file, range or date is not recommended because they have their own dedicated components.

template
<Input label="Age" type="number" />
<Input label="Email" type="email" />
<Input label="Password" type="password" />
<Input label="URL" type="url" />
<Input label="Phone" type="tel" />

Additional information ​

The Input component supports the error-text and hint-text props to display additional information to the user.

Enter your full name
This field is required
template
<Input label="Name" hint-text="Enter your full name" />
<Input label="Occupation" error-text="This field is required" />

Hint Slot ​

If the hint-text prop is not sufficient, there is also a #hint slot:

Enter your full name
template
<Input label="Name">
  <template #hint>
    Enter your <em>full name</em>
  </template>
</Input>

Spacing ​

If you want to preserve the spacing between the input and the additional information (even if it is not shown), you can use the addBottomSpace property.

template
<Input label="Occupation" :error-text="errorText" add-bottom-space />

Label ​

The Input component supports the label prop to display a label above the input. Additionally, it supports the showOptionalInLabel property to indicate that the input is optional.

template
<Input label="Zip code" show-optional-in-label />

Disabled ​

The Input component supports the disabled prop to disable the input.

template
<Input label="Search" placeholder="Type to search" disabled />

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.