React Reference > Input Component

<Input />

An input element. The type attribute can be used to change the input type. All text input types as well as checkbox and radio 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..

Usage 

<Input
  value={this.state.text} float
  onChange={(event) => { this.setState({text: event.target.value})} }
  modifier='material'
  placeholder='Username' />

Props

[improve this]
Name Type Description
modifier string The appearance of the input. Optional.
disabled bool Specifies whether the input is disabled. Optional.
readOnly bool Specifies whether the input is read-only. Optional.
onChange func Called when the inner input fires a change event. Optional.
onInput func Called when the inner input fires an input event. Optional.
value union Content of the input (controlled). Optional.
defaultValue union Content of the input at first render (uncontrolled). 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 components.

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.
inputId string Specify the “id” attribute of the inner <input> element. This is useful when using
float bool If this attribute is present, the placeholder will be animated in Material Design. Optional.

Preset Modifiers

[improve this]
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.

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.