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 is-disabled prop to disable the input.

WARNING

If the user cannot take any action to make the field editable, the is-read-only prop should be used instead.

See Disabled vs read-only for details.

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

Read Only ​

Similar to disabled fields, read-only fields cannot be edited. However, unlike disabled fields, read-only fields are able to receive focus, but are not intended to become editable.

In the example below, the Name and ZIP Code fields are read-only, the Age field is disabled, and the Location field is editable. Notice that the read-only fields have a content position and spacing which matches the other inputs.

INFO

The difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly#attribute_interactions

API ​

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