ion-label
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
- Javascript
- React
- Stencil
- Vue
<!-- 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>
<!-- 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>
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>
);
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>,
];
}
}
<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 |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
Name | Description |
---|---|
--color | Color of the label |
Slots
No slots available for this component.