ion-label

scoped

Contents

• Usage
• Properties
• CSS Custom Properties

Label is a wrapper element that can be used in combination with ion-item, ion-input, ion-toggle, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating.

Usage

Angular

<!-- Default Label --><ion-label>Label</ion-label>
<!-- Label Colors --><ion-label color="primary">Primary Label</ion-label><ion-label color="secondary">Secondary Label</ion-label><ion-label color="danger">Danger Label</ion-label><ion-label color="light">Light Label</ion-label><ion-label color="dark">Dark Label</ion-label>
<!-- Item Labels --><ion-item>  <ion-label>Default Item</ion-label></ion-item>
<ion-item>  <ion-label class="ion-text-wrap">    Multi-line text that should wrap when it is too long    to fit on one line in the item.  </ion-label></ion-item>
<!-- Input Labels --><ion-item>  <ion-label>Default Input</ion-label>  <ion-input></ion-input></ion-item>
<ion-item>  <ion-label position="fixed">Fixed</ion-label>  <ion-input></ion-input></ion-item>
<ion-item>  <ion-label position="floating">Floating</ion-label>  <ion-input></ion-input></ion-item>
<ion-item>  <ion-label position="stacked">Stacked</ion-label>  <ion-input></ion-input></ion-item>
<ion-item>  <ion-label>Toggle</ion-label>  <ion-toggle slot="end" checked></ion-toggle></ion-item>
<ion-item>  <ion-checkbox slot="start" checked></ion-checkbox>  <ion-label>Checkbox</ion-label></ion-item>

Javascript

<!-- Default Label --><ion-label>Label</ion-label>
<!-- Label Colors --><ion-label color="primary">Primary Label</ion-label><ion-label color="secondary">Secondary Label</ion-label><ion-label color="danger">Danger Label</ion-label><ion-label color="light">Light Label</ion-label><ion-label color="dark">Dark Label</ion-label>
<!-- Item Labels --><ion-item>  <ion-label>Default Item</ion-label></ion-item>
<ion-item>  <ion-label class="ion-text-wrap">    Multi-line text that should wrap when it is too long    to fit on one line in the item.  </ion-label></ion-item>
<!-- Input Labels --><ion-item>  <ion-label>Default Input</ion-label>  <ion-input></ion-input></ion-item>
<ion-item>  <ion-label position="fixed">Fixed</ion-label>  <ion-input></ion-input></ion-item>
<ion-item>  <ion-label position="floating">Floating</ion-label>  <ion-input></ion-input></ion-item>
<ion-item>  <ion-label position="stacked">Stacked</ion-label>  <ion-input></ion-input></ion-item>
<ion-item>  <ion-label>Toggle</ion-label>  <ion-toggle slot="end" checked></ion-toggle></ion-item>
<ion-item>  <ion-checkbox slot="start" checked></ion-checkbox>  <ion-label>Checkbox</ion-label></ion-item>

React

import React from 'react';import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react';
export const LabelExample: React.FC = () => (  <IonContent>    {/*-- Default Label --*/}    <IonLabel>Label</IonLabel><br />
    {/*-- Label Colors --*/}    <IonLabel color="primary">Primary Label</IonLabel><br />    <IonLabel color="secondary">Secondary Label</IonLabel><br />    <IonLabel color="danger">Danger Label</IonLabel><br />    <IonLabel color="light">Light Label</IonLabel><br />    <IonLabel color="dark">Dark Label</IonLabel><br />
    {/*-- Item Labels --*/}    <IonItem>      <IonLabel>Default Item</IonLabel>    </IonItem>
    <IonItem>      <IonLabel className="ion-text-wrap">        Multi-line text that should wrap when it is too long        to fit on one line in the item.      </IonLabel>    </IonItem>
    {/*-- Input Labels --*/}    <IonItem>      <IonLabel>Default Input</IonLabel>      <IonInput></IonInput>    </IonItem>
    <IonItem>      <IonLabel position="fixed">Fixed</IonLabel>      <IonInput></IonInput>    </IonItem>
    <IonItem>      <IonLabel position="floating">Floating</IonLabel>      <IonInput></IonInput>    </IonItem>
    <IonItem>      <IonLabel position="stacked">Stacked</IonLabel>      <IonInput></IonInput>    </IonItem>
    <IonItem>      <IonLabel>Toggle</IonLabel>      <IonToggle slot="end" checked></IonToggle>    </IonItem>
    <IonItem>      <IonCheckbox slot="start" checked />      <IonLabel>Checkbox</IonLabel>    </IonItem>  </IonContent>);

Stencil

import { Component, h } from '@stencil/core';
@Component({  tag: 'label-example',  styleUrl: 'label-example.css'})export class LabelExample {  render() {    return [      // Default Label      <ion-label>Label</ion-label>,
      // Label Colors      <ion-label color="primary">Primary Label</ion-label>,      <ion-label color="secondary">Secondary Label</ion-label>,      <ion-label color="danger">Danger Label</ion-label>,      <ion-label color="light">Light Label</ion-label>,      <ion-label color="dark">Dark Label</ion-label>,
      // Item Labels      <ion-item>        <ion-label>Default Item</ion-label>      </ion-item>,
      <ion-item>        <ion-label class="ion-text-wrap">          Multi-line text that should wrap when it is too long          to fit on one line in the item.        </ion-label>      </ion-item>,
      // Input Labels      <ion-item>        <ion-label>Default Input</ion-label>        <ion-input></ion-input>      </ion-item>,
      <ion-item>        <ion-label position="fixed">Fixed</ion-label>        <ion-input></ion-input>      </ion-item>,
      <ion-item>        <ion-label position="floating">Floating</ion-label>        <ion-input></ion-input>      </ion-item>,
      <ion-item>        <ion-label position="stacked">Stacked</ion-label>        <ion-input></ion-input>      </ion-item>,
      <ion-item>        <ion-label>Toggle</ion-label>        <ion-toggle slot="end" checked={true}></ion-toggle>      </ion-item>,
      <ion-item>        <ion-checkbox slot="start" checked={true}></ion-checkbox>        <ion-label>Checkbox</ion-label>      </ion-item>    ];  }}

Vue

<template>  <!-- Default Label -->  <ion-label>Label</ion-label>
  <!-- Label Colors -->  <ion-label color="primary">Primary Label</ion-label>  <ion-label color="secondary">Secondary Label</ion-label>  <ion-label color="danger">Danger Label</ion-label>  <ion-label color="light">Light Label</ion-label>  <ion-label color="dark">Dark Label</ion-label>
  <!-- Item Labels -->  <ion-item>    <ion-label>Default Item</ion-label>  </ion-item>
  <ion-item>    <ion-label class="ion-text-wrap">      Multi-line text that should wrap when it is too long      to fit on one line in the item.    </ion-label>  </ion-item>
  <!-- Input Labels -->  <ion-item>    <ion-label>Default Input</ion-label>    <ion-input></ion-input>  </ion-item>
  <ion-item>    <ion-label position="fixed">Fixed</ion-label>    <ion-input></ion-input>  </ion-item>
  <ion-item>    <ion-label position="floating">Floating</ion-label>    <ion-input></ion-input>  </ion-item>
  <ion-item>    <ion-label position="stacked">Stacked</ion-label>    <ion-input></ion-input>  </ion-item>
  <ion-item>    <ion-label>Toggle</ion-label>    <ion-toggle slot="end" checked></ion-toggle>  </ion-item>
  <ion-item>    <ion-checkbox slot="start" checked></ion-checkbox>    <ion-label>Checkbox</ion-label>  </ion-item></template>
<script>import {   IonCheckbox,   IonInput,   IonItem,   IonLabel,  IonToggle} from '@ionic/vue';import { defineComponent } from 'vue';
export default defineComponent({  components: {     IonCheckbox,     IonInput,     IonItem,     IonLabel,    IonToggle  }});</script>

Properties

color

Description	The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attribute	color
Type	string ｜ undefined
Default	undefined

mode

Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

position

Description	The position determines where and how the label behaves inside an item.
Attribute	position
Type	"fixed" ｜ "floating" ｜ "stacked" ｜ undefined
Default	undefined

CSS Custom Properties

Name	Description
--color	Color of the label