Skip to main content
Version: v7

ion-item

shadow

Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more.

Basic Usage

Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using .ion-text-wrap in the below example. See the CSS Utilities Documentation for more classes that can be added to an item to transform the text.

<ion-item>
<ion-label>Basic Item</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>H1 Heading</h1>
<p>Paragraph</p>
</ion-label>
</ion-item>

<ion-item>
<ion-label>
<h2>H2 Heading</h2>
<p>Paragraph</p>
</ion-label>
</ion-item>

<ion-item>
<ion-label>
<h3>H3 Heading</h3>
<p>Paragraph</p>
</ion-label>
</ion-item>

Clickable Items

An item is considered "clickable" if it has an href or button property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in md mode, has a highlight when activated in ios mode, and has a detail arrow by default in ios mode.

<ion-item href="#">
<ion-label>Anchor Item</ion-label>
</ion-item>

<ion-item href="#" disabled="true">
<ion-label>Disabled Anchor Item</ion-label>
</ion-item>

<ion-item button>
<ion-label>Button Item</ion-label>
</ion-item>

<ion-item button disabled="true">
<ion-label>Disabled Button Item</ion-label>
</ion-item>

Detail Arrows

By default clickable items will display a right arrow icon on ios mode. To hide the right arrow icon on clickable elements, set the detail property to false. To show the right arrow icon on an item that doesn't display it naturally, set the detail property to true.

<ion-item detail="true">
<ion-label>
<h3>Text Item</h3>
<p>Detail set to true - detail arrow displays on both modes</p>
</ion-label>
</ion-item>

<ion-item button>
<ion-label>
<h3>Button Item</h3>
<p>Default detail - detail arrow displays on iOS only</p>
</ion-label>
</ion-item>

<ion-item button detail="true">
<ion-label>
<h3>Button Item</h3>
<p>Detail set to true - detail arrow displays on both modes</p>
</ion-label>
</ion-item>

<ion-item button detail="false">
<ion-label>
<h3>Button Item</h3>
<p>Detail set to false - detail arrow hidden on both modes</p>
</ion-label>
</ion-item>

<ion-item button detail="true" detail-icon="caret-forward-outline">
<ion-label>
<h3>Button Item</h3>
<p>Detail set to true - detail arrow displays on both modes</p>
<p>Detail icon set to caret-forward-outline</p>
</ion-label>
</ion-item>

Item Lines

Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the "start" slot. The lines property can be modified to "full" or "none" which will show a full width border or no border, respectively.

<ion-item>
<ion-label> Default Item Lines </ion-label>
</ion-item>

<ion-item lines="inset">
<ion-label>Item Lines Inset</ion-label>
</ion-item>

<ion-item lines="full">
<ion-label>Item Lines Full</ion-label>
</ion-item>

<ion-item lines="none">
<ion-label>Item Lines None</ion-label>
</ion-item>

<ion-item>
<ion-icon name="star" slot="start"></ion-icon>
<ion-label>Default Item Lines</ion-label>
<ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

<ion-item lines="inset">
<ion-icon name="star" slot="start"></ion-icon>
<ion-label>Item Lines Inset</ion-label>
<ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

<ion-item lines="full">
<ion-icon name="star" slot="start"></ion-icon>
<ion-label>Item Lines Full</ion-label>
<ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

<ion-item lines="none">
<ion-icon name="star" slot="start"></ion-icon>
<ion-label>Item Lines None</ion-label>
<ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

Media Items

Avatars and Thumbnails can be slotted inside of an item. This is useful when making lists of images and text.

<ion-item>
<ion-avatar slot="start">
<img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
</ion-avatar>
<ion-label> Avatar Item </ion-label>
</ion-item>

<ion-item>
<ion-thumbnail slot="start">
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
</ion-thumbnail>
<ion-label> Thumbnail Item </ion-label>
</ion-item>

Buttons in Items

Buttons are styled smaller inside of items than when they are outside of them. To make the button size match buttons outside of an item, set the size attribute to "default".

<ion-item>
<ion-button slot="start"> Start </ion-button>
<ion-label>Default Buttons</ion-label>
<ion-button slot="end"> End </ion-button>
</ion-item>

<ion-item>
<ion-button slot="start">
Start
<ion-icon name="home" slot="end"></ion-icon>
</ion-button>
<ion-label>Buttons with Icons</ion-label>
<ion-button slot="end">
<ion-icon name="star" slot="end"></ion-icon>
End
</ion-button>
</ion-item>

<ion-item>
<ion-button slot="start">
<ion-icon slot="icon-only" name="navigate"></ion-icon>
</ion-button>
<ion-label>Icon only Buttons</ion-label>
<ion-button slot="end">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-item>

<ion-item>
<ion-label>Button Sizes</ion-label>
<ion-button slot="end" size="small"> Small </ion-button>
<ion-button slot="end" size="default"> Default </ion-button>
<ion-button slot="end" size="large"> Large </ion-button>
</ion-item>

Icons in Items

<ion-item>
<ion-label> Default Icon </ion-label>
<ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

<ion-item>
<ion-label> Large Icon </ion-label>
<ion-icon name="information-circle" size="large" slot="end"></ion-icon>
</ion-item>

<ion-item>
<ion-label> Small Icon </ion-label>
<ion-icon name="information-circle" size="small" slot="end"></ion-icon>
</ion-item>

<ion-item>
<ion-icon name="star" slot="start"></ion-icon>
<ion-label> Default Icon </ion-label>
</ion-item>

Item Inputs

<ion-item>
<ion-input label="Default Input" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item fill="outline">
<ion-input label="Floating Input: Outline (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item fill="solid">
<ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-select label="Select" placeholder="Make a Selection">
<ion-select-option value="">No Game Console</ion-select-option>
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64">Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-toggle> Toggle </ion-toggle>
</ion-item>

<ion-item>
<ion-checkbox> Checkbox </ion-checkbox>
</ion-item>

<ion-item>
<ion-range label-placement="start">
<div slot="label">Range</div>
</ion-range>
</ion-item>

Theming

Colors

<ion-item>
<ion-label>Default Item</ion-label>
</ion-item>
<ion-item color="primary">
<ion-label>Primary Item</ion-label>
</ion-item>
<ion-item color="secondary">
<ion-label>Secondary Item</ion-label>
</ion-item>
<ion-item color="tertiary">
<ion-label>Tertiary Item</ion-label>
</ion-item>
<ion-item color="success">
<ion-label>Success Item</ion-label>
</ion-item>
<ion-item color="warning">
<ion-label>Warning Item</ion-label>
</ion-item>
<ion-item color="danger">
<ion-label>Danger Item</ion-label>
</ion-item>
<ion-item color="light">
<ion-label>Light Item</ion-label>
</ion-item>
<ion-item color="medium">
<ion-label>Medium Item</ion-label>
</ion-item>
<ion-item color="dark">
<ion-label>Dark Item</ion-label>
</ion-item>

CSS Shadow Parts

ion-item::part(native) {
background: #19422d;
color: #fff;

border-color: #fff;
border-style: dashed;
border-width: 2px;

border-radius: 20px;
}

ion-item::part(detail-icon) {
color: white;
opacity: 1;
font-size: 20px;
}

CSS Custom Properties

ion-item {
--background: #19422d;
--color: #fff;

--border-color: #fff;
--border-style: dashed;
--border-width: 2px;

--border-radius: 20px;

--ripple-color: purple;

--detail-icon-color: white;
--detail-icon-opacity: 1;
--detail-icon-font-size: 20px;
}

Input Highlight

Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, md items have a highlight with a height set to 2px and ios has no highlight (technically the height is set to 0). The height can be changed using the --highlight-height CSS property. To turn off the highlight, set this variable to 0.

The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the primary color. If the input is valid it will use the success color, and invalid inputs will use the danger color. This can be customized using the provided CSS properties.

ion-item {
--highlight-height: 2px;
--highlight-color-focused: #43e7f3;
--highlight-color-valid: #6f58d8;
--highlight-color-invalid: #ff46be;
}

Properties

button

DescriptionIf true, a button tag will be rendered and the item will be tappable.
Attributebutton
Typeboolean
Defaultfalse

color

DescriptionThe 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.
Attributecolor
Type"danger" ๏ฝœ "dark" ๏ฝœ "light" ๏ฝœ "medium" ๏ฝœ "primary" ๏ฝœ "secondary" ๏ฝœ "success" ๏ฝœ "tertiary" ๏ฝœ "warning" ๏ฝœ string ๏ฝœ undefined
Defaultundefined

counter (deprecated)

DescriptionIf true, a character counter will display the ratio of characters used and the total character limit. Only applies when the maxlength property is set on the inner ion-input or ion-textarea. Deprecated Use the counter property on ion-input or ion-textarea instead.
Attributecounter
Typeboolean
Defaultfalse

counterFormatter (deprecated)

DescriptionA callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". Deprecated Use the counterFormatter property on ion-input or ion-textarea instead.
Attributeundefined
Type((inputLength: number, maxLength: number) => string) ๏ฝœ undefined
Defaultundefined

detail

DescriptionIf true, a detail arrow will appear on the item. Defaults to false unless the mode is ios and an href or button property is present.
Attributedetail
Typeboolean ๏ฝœ undefined
Defaultundefined

detailIcon

DescriptionThe icon to use when detail is set to true.
Attributedetail-icon
Typestring
DefaultchevronForward

disabled

DescriptionIf true, the user cannot interact with the item.
Attributedisabled
Typeboolean
Defaultfalse

download

DescriptionThis attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
Attributedownload
Typestring ๏ฝœ undefined
Defaultundefined

fill

DescriptionThe fill for the item. If "solid" the item will have a background. If "outline" the item will be transparent with a border. Only available in md mode.
Attributefill
Type"outline" ๏ฝœ "solid" ๏ฝœ undefined
Defaultundefined

href

DescriptionContains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attributehref
Typestring ๏ฝœ undefined
Defaultundefined

lines

DescriptionHow the bottom border should be displayed on the item.
Attributelines
Type"full" ๏ฝœ "inset" ๏ฝœ "none" ๏ฝœ undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" ๏ฝœ "md"
Defaultundefined

rel

DescriptionSpecifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attributerel
Typestring ๏ฝœ undefined
Defaultundefined

routerAnimation

DescriptionWhen using a router, it specifies the transition animation when navigating to another page using href.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) ๏ฝœ undefined
Defaultundefined

routerDirection

DescriptionWhen using a router, it specifies the transition direction when navigating to another page using href.
Attributerouter-direction
Type"back" ๏ฝœ "forward" ๏ฝœ "root"
Default'forward'

shape

DescriptionThe shape of the item. If "round" it will have increased border radius.
Attributeshape
Type"round" ๏ฝœ undefined
Defaultundefined

target

DescriptionSpecifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
Attributetarget
Typestring ๏ฝœ undefined
Defaultundefined

type

DescriptionThe type of the button. Only used when an onclick or button property is present.
Attributetype
Type"button" ๏ฝœ "reset" ๏ฝœ "submit"
Default'button'

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
detail-iconThe chevron icon for the item. Only applies when detail="true".
nativeThe native HTML button, anchor or div element that wraps all child elements.

CSS Custom Properties

NameDescription
--backgroundBackground of the item
--background-activatedBackground of the item when pressed. Note: setting this will interfere with the Material Design ripple.
--background-activated-opacityOpacity of the item background when pressed
--background-focusedBackground of the item when focused with the tab key
--background-focused-opacityOpacity of the item background when focused with the tab key
--background-hoverBackground of the item on hover
--background-hover-opacityOpacity of the background of the item on hover
--border-colorColor of the item border
--border-radiusRadius of the item border
--border-styleStyle of the item border
--border-widthWidth of the item border
--colorColor of the item
--color-activatedColor of the item when pressed
--color-focusedColor of the item when focused with the tab key
--color-hoverColor of the item on hover
--detail-icon-colorColor of the item detail icon
--detail-icon-font-sizeFont size of the item detail icon
--detail-icon-opacityOpacity of the item detail icon
--highlight-color-focusedThe color of the highlight on the item when focused. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on ion-input or ion-textarea when using the modern form syntax.
--highlight-color-invalidThe color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on ion-input or ion-textarea when using the modern form syntax.
--highlight-color-validThe color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on ion-input or ion-textarea when using the modern form syntax.
--highlight-heightThe height of the highlight on the item. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on ion-input or ion-textarea when using the modern form syntax.
--inner-border-widthWidth of the item inner border
--inner-box-shadowBox shadow of the item inner
--inner-padding-bottomBottom padding of the item inner
--inner-padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner
--inner-padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner
--inner-padding-topTop padding of the item inner
--min-heightMinimum height of the item
--padding-bottomBottom padding of the item
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the item
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the item
--padding-topTop padding of the item
--ripple-colorColor of the item ripple effect
--transitionTransition of the item

Slots

NameDescription
``Content is placed between the named slots if provided without a slot.
endContent is placed to the right of the item text in LTR, and to the left in RTL.
errorContent is placed under the item and displayed when an error is detected. DEPRECATED Use the "errorText" property on ion-input or ion-textarea instead.
helperContent is placed under the item and displayed when no error is detected. DEPRECATED Use the "helperText" property on ion-input or ion-textarea instead.
startContent is placed to the left of the item text in LTR, and to the right in RTL.