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.
Basic Usage
<ion-label>Label</ion-label>
Item Labels
<ion-item>
<ion-label>Default Label</ion-label>
</ion-item>
<ion-item>
<ion-label>
Multi-line text that should ellipsis when it is too long
to fit on one line. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</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. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</ion-label>
</ion-item>
<ion-item>
<ion-label>
<h1>Heading</h1>
<p>Paragraph</p>
</ion-label>
</ion-item>
Input Labels
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input placeholder="Enter text"></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>
Theming
Colors
<ion-label>Default</ion-label>
<ion-label color="primary">Primary</ion-label>
<ion-label color="secondary">Secondary</ion-label>
<ion-label color="tertiary">Tertiary</ion-label>
<ion-label color="success">Success</ion-label>
<ion-label color="warning">Warning</ion-label>
<ion-label color="danger">Danger</ion-label>
<ion-label color="light">Light</ion-label>
<ion-label color="medium">Medium</ion-label>
<ion-label color="dark">Dark</ion-label>
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 | "danger" ๏ฝ "dark" ๏ฝ "light" ๏ฝ "medium" ๏ฝ "primary" ๏ฝ "secondary" ๏ฝ "success" ๏ฝ "tertiary" ๏ฝ "warning" ๏ฝ string & Record<never, never> ๏ฝ 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. This property is only available when using ion-label inside of an ion-item . |
Slots
No slots available for this component.