ons-input

実例

Form inputs

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.

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.

関連情報

属性

名前 型 / デフォルト値 概要
placeholder String Placeholder text. In Material Design, this placeholder will be a floating label. (翻訳中) Optional.
float この属性が設定された時、ラベルはアニメーションするようになります。 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.

プロパティ概要

名前 概要
value The current value of the input. (翻訳中)
disabled 無効化されている場合にtrue

プリセットのmodifier

Name 概要
material Displays a Material Design input. (翻訳中)
underbar Displays a horizontal line underneath a text input. (翻訳中)
transparent Displays a transparent input. Works for Material Design. (翻訳中)

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。