Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Label

ion-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.

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 persistent label that sits next the input.
floating A label that will float above the input if the input is empty or loses focus.
stacked A stacked label will always appear on top of the input.

Input Properties

Attr Type Details
color string

The predefined color to use. For example: "primary", "secondary", "danger".

mode string

The mode to apply to this component. Mode can be ios, wp, or md.

Sass Variables

Property Default Description
$label-ios-margin $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0

Margin of the label

Property Default Description
$label-md-text-color #999

Text color of the label

$label-md-text-color-focused color($colors-md, primary)

Text color of the label when it has focused

$label-md-margin $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0

Margin of the label

Property Default Description
$label-wp-text-color #999

Text color of the label

$label-wp-text-color-focused color($colors-wp, primary)

Text color of the label when it has focused

Related

Input Component Docs, Input API Docs

API

Native

General