# Items

The ActionSheet items are highly customizable elements that allow you to control their look and feel depending on the use case.

To define the ActionSheet options, provide an [`ActionSheetItem`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetitem) collection to the [`items`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetprops#items) property of the component.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/actionsheet/items/func/source.txt)

## Setting Title and Description

To configure the item text or any additional details, use the [`title`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetitemprops#title) and [`description`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetitemprops#description) properties of the `ActionSheetItem` object.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/actionsheet/items/title/source.txt)

## Defining Groups

To indicate a group of items with similar functionality, set the [`group`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetitemprops#group) property of the `ActionSheetItem` object to `top` or `bottom`. The ActionSheet will visually separate the two groups by rendering a separator line between them.

The following example demonstrates the ActionSheet groups in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/actionsheet/items/groups/source.txt)

## Setting Icons

You can enhance the ActionSheet item content by adding icons. Set the [`icon`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetitemprops#icon) property of the `ActionSheetItem` object to take full control over the visibility of the icons.

The following example demonstrates the icon property in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/actionsheet/items/icons/source.txt)

## Disabling Items

To disable certain items, set the [`disabled`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetitemprops#disabled) property of the `ActionSheetItem` to `true`.

The following example demonstrates the disabled state of the ActionSheet items.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/actionsheet/items/disabling/source.txt)

## Styling Items

Some scenarios require further customizations of the items' layout. Use the [`className`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetitemprops#className) and [`style`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetitemprops#style) options of the `ActionSheetItem` object to change the layout of the options.

The following example demonstrates the `className` and `style` properties in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/actionsheet/items/styling/source.txt)

## Suggested Links

* [API Reference of the ActionSheet](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheet)
* [API Reference of the ActionSheetItem](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetitem)