Label

Improve this doc

Labels are placed inside of an ion-item element and can be used to describe an ion-input, ion-toggle, ion-checkbox, and more.

Directive

selector: ion-label

Usage

<ion-item>
  <ion-label>Username</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label fixed>Website</ion-label>
  <ion-input type="url"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Email</ion-label>
  <ion-input type="email"></ion-input>
</ion-item>

<ion-item>
  <ion-label stacked>Phone</ion-label>
  <ion-input type="tel"></ion-input>
</ion-item>

<ion-item>
  <ion-label>Toggle</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Checkbox</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

Attributes:

Attribute Description
fixed A persistant label that sits next the input.
floating A label that will float about the input if the input is empty of looses focus.
stacked A stacked label will always appear on top of the input.

Related

Input Component Docs, Input API Docs

API

Native

General