Ionic Forms and Input Fields

The list class can also be used for input elements. The item-input and item classes specify the text box and its label.

Input Field Attribute: placeholder

In the following example, the default width is 100% (with no borders on either side), and the placeholder attribute is used to set a hint for the expected value of the input field.

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div>

Try it »

Input Field Attribute: input-label

Use input-label to place the label to the left of the input field.

<div class="list">
  <label class="item item-input">
    <span class="input-label">Username:</span>
    <input type="text">
  </label>
  <label class="item item-input">
    <span class="input-label">Password:</span>
    <input type="password">
  </label>
</div>

Try it »

Stacked Labels

Stacked labels are typically positioned at the top of the input field. Each option is specified with the item-stacked-label class. Each input field requires an input-label. The following example also uses the placeholder attribute to set input hints.

<div class="list">
  <label class="item item-input item-stacked-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="John">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Suhr">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="[email protected]">
  </label>
</div>

Try it »

Floating Labels

Floating labels are similar to stacked labels, but floating labels have an animation effect. Each option requires the item-floating-label class, and the input label requires the input-label.

<div class="list">
  <label class="item item-input item-floating-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input item-floating-label">

<div class="input-label">Email</div>
<input type="text" placeholder="Email">
</label>
</div>

Try it »

Inline Forms

By default, each input field is 100% wide, but we can set the padding of the form using the list list-inset or card classes, with the card class having a shadow.

<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name">
</label>
</div>

Try it »

Inline Input Fields

Use list-inset to set the padding for an inset list. Use the item-input-inset style to embed a button.

<div class="list">

<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Email">
</label>
<button class="button button-small">
Submit
</button>
</div>

</div>

Try it »

Input Fields with Icons

The item-input field can easily add icons. Icons can be added before the <input>.

<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>

Try it »

Header Input Fields

Input fields can be placed in the header and can include submit or cancel buttons.

<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>

Try it »