Angular directive for <ons-input> component.
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.
modifier attribute<ons-checkbox> element is used to display a checkbox.<ons-radio> element is used to display a radio button.<ons-range> element is used to display a range slider.<ons-switch> element is used to display a draggable toggle switch.<ons-select> element is used to display a select box.| 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 |
| input-id | String |
Specify the “id” attribute of the inner <input> element. This is useful when using <label for="..."> elements.
Optional.
|
| 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. |
| 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. |
| Signature | Description |
|---|---|
| focus() | Focuses the input. |
| blur() | Removes focus from the input. |
Focuses the input.
Removes focus from the input.
| Name | Type | Description |
|---|---|---|
| value |
Input value for the internal <input> element.
|
| Name | Type | Description |
|---|---|---|
| valueChange | Triggers when the value is changed. |
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.