JavaScript Reference > ons-input

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

In Onsen UI text input is provided by the <ons-input> tag. It works exactly like the normal <input> tag but with some small differences.

Just like the normal input tag you can use the type attribute to define what kind of input that should be displayed. To get an number input you can use the number type:

<ons-input
  type="number"
  placeholder="Age"
  min="0"
  max="200">
</ons-input>

You can also use types like number or date. The only exception are checkboxes and radio buttons, which are implemented in different elements.

Any valid HTML attribute for inputs should work in ons-input (required, max, etc.).

Floating label

For Android devices the input will displayed as a Material Design input element. One of the features of this input is that it can have a floating label which will animated when the user starts typing. Try changing the style to Android to see how it works.

The label is defined with the placeholder attribute and to activate the animation the float attribute is required.

<ons-input placeholder="Username" float></ons-input>

Inner input element

For normal input elements is possible to define a <label> tab with the for attribute to link it to an input element.

Unfortunately this does not work with custom elements like <ons-label> so in order to do it we need to set the id attribute of the inner input element. This is done using the input-id attribute.

<label for="username">Username</label>
<ons-input input-id="username"></ons-input>

This work with any input in Onsen UI such as checkboxes, radios, etc.

See also

Attributes

[improve this]

Attributes are added directly to the element. You can do this in HTML or JS.

HTML: <ons-input someAttribute="true" anotherAttribute><ons-input>
JS: document.querySelector('ons-input').setAttribute('someAttribute', 'true')

Name Type Description
placeholder String Placeholder text. In Material Design, this placeholder will be a floating label. Optional.
float If this attribute is present, the placeholder will be animated in Material Design. 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.
input-id String Specify the “id” attribute of the inner <input> element. This is useful when using <label for="..."> elements. Optional.

Properties

[improve this]

Properties are accessed on the element through JS, and should be get and set directly. For example: document.querySelector('ons-input').float.

Name Description
float If this property is present, the placeholder will be animated in Material Design.
value The current value of the input.
disabled Whether the input is disabled or not.

Preset Modifiers

[improve this]

Modifiers are set in the modifier attribute. To use more than one, separate them by spaces. For example:
<ons-input modifier="material underbar"><ons-input>.

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.

Methods

[improve this]

These methods are called directly on the DOM element. Get a reference to the element in JS, and the methods below will be available to call on it. For example: document.querySelector('ons-input').someMethod().

Signature Description
focus() Focuses the input.
blur() Removes focus from the input.
focus()

Focuses the input.

blur()

Removes focus from the input.

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.