Reference > v-ons-input

v-ons-input

An input element. The type attribute can be used to change the input type. All text input types are supported. The component will automatically render as a Material Design input on Android devices. Most attributes that can be used for a normal <input> element can also be used on the <ons-input> element.

Tutorial

Text input

Text input elements are created using the VOnsInput component. It works almost exactly the same as a normal <input> tag.

This component implements a type attribute to choose the type of the input. Default is text but it also admits password, number, etc. The only exception are checkboxes and radio buttons, which have corresponding components, VOnsCheckbox and VOnsRadio.

An attribute input-id is provided to set the ID of the inner native element. This is useful for HTMLLabel elements: <label for="some-inner-input">.

For the text-like inputs, in Material Design the placeholder can be made to float using the float prop.

Using v-model

Every input is compatible with v-model directive. Checkboxes can be bound to arrays or booleans normally. The only exception are modifiers. There is, however, a workaround for lazy modifier:

<v-ons-input v-model="something" model-event="change"></v-ons-input>

This will use change event instead of input when updating v-model.

See also

Props

Name Type Description
float Boolean If this attribute is present, the placeholder will be animated in Material Design. Optional.
inputId String Specify the “id” attribute of the inner <input> element. This is useful when using <label for="..."> elements. Optional.
modelEvent Boolean The native event which should trigger the update:modelValue event. Optional.
modelValue Boolean The value of the input. Optional.
placeholder String Placeholder text. In Material Design, this placeholder will be a floating label. Optional.
type String

Specify the input type. This is the same as the “type” attribute for normal inputs. It expects strict text types such as text, password, etc. For checkbox, radio button, select or range, please have a look at the corresponding elements. Please take a look at MDN for an exhaustive list of possible values. Depending on the platform and browser version some of these might not work.

Optional.

Preset Modifiers

Name Description
material Displays a Material Design input.
underbar Displays a horizontal line underneath a text input.
transparent Displays a transparent input. Works for Material Design.

Events

Name Description
update:modelValue Fired right after the event set in the modelEvent prop.
update:modelValue

Fired right after the event set in the modelEvent prop.

Parameters
Name Type Description

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.