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.

Sass Variables

Property Default Description
$label-ios-text-color null

Text color of the label by an input, select, or datetime

$label-ios-text-color-focused null

Text color of the stacked/floating label when it is focused

$label-ios-margin-top $item-ios-padding-top

Margin top of the label

$label-ios-margin-end ($item-ios-padding-end / 2)

Margin end of the label

$label-ios-margin-bottom $item-ios-padding-bottom

Margin bottom of the label

$label-ios-margin-start 0

Margin start of the label

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

Text color of the label by an input, select, or datetime

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

Text color of the stacked/floating label when it is focused

$label-md-margin-top $item-md-padding-top

Margin top of the label

$label-md-margin-end ($item-md-padding-end / 2)

Margin end of the label

$label-md-margin-bottom $item-md-padding-bottom

Margin bottom of the label

$label-md-margin-start 0

Margin start of the label

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

Text color of the label by an input, select, or datetime

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

Text color of the stacked/floating label when it is focused

Related

Input Component Docs, Input API Docs

API

Native

General