> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# ListItem
> Compose consistent rows with icons, descriptions, indicators, and actions.
export const StoryEmbed = ({storyId, title, height = 240}) => <>
Open in Storybook
;
`ListItem` supplies the visual layout shared by list and menu rows. Use [Menu](/ui/primitives/surfaces/menu) or [Select](/ui/primitives/input/select) when you need their selection and keyboard behavior.
## Anatomy
`ListItem` exposes content slots through props. These slots arrange content inside one row; they are not separately exported components.
```text theme={null}
ListItem
├── startIcon
├── children
├── description
├── actions
└── endIcon
```
| Slot | Requirement | Purpose |
| ------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------- |
| `children` | Required for a visible row label | Supplies the main text. |
| `startIcon`, `endIcon` | Optional | Add supporting icons at either end of the row content. |
| `description` | Optional | Adds supporting text inline or at the end, according to `descriptionPlacement`. |
| `actions` | Optional | Adds trailing content, such as a separately focusable action. |
| `indicator`, `hotkeys`, `hasSubmenu` | Optional | Configure built-in selection marks, shortcut hints, and the submenu indicator. |
The row supplies layout. Use `render` to choose its element and semantics. For a row with independent action buttons, keep the row itself non-interactive so those buttons remain separate controls.
## Action row
```tsx theme={null}
import { IconCopy } from 'twenty-ui/icon';
import { ListItem } from 'twenty-ui/primitives/navigation';
type DuplicateActionProps = { onDuplicate: () => void };
export const DuplicateAction = ({ onDuplicate }: DuplicateActionProps) => (
}
startIcon={}
description="Create a copy"
onClick={onDuplicate}
>
Duplicate
);
```
The default element is a `div`. Use `render` to give an interactive row appropriate semantics, such as a button or link. `hotkeys` displays shortcut hints; your application must register the shortcuts.
## Selection indicator
```tsx theme={null}
import { useState } from 'react';
import { ListItem } from 'twenty-ui/primitives/navigation';
export const ShowArchivedToggle = () => {
const [selected, setSelected] = useState(false);
return (
}
selected={selected}
indicator="check"
onClick={() => setSelected(!selected)}
>
Show archived records
);
};
```
`selected`, `focused`, and `disabled` control row styling. The `check` and `checkbox` indicators are visual; use a real [Checkbox](/ui/primitives/input/checkbox) for a form control. When using a disabled button or link through `render`, also supply the element's appropriate disabled behavior and semantics.
## Slots
Use `startIcon` and `endIcon` for icons, `description` for supporting text, `actions` for trailing content, and `hasSubmenu` for a submenu indicator. `descriptionPlacement` accepts `inline` or `end`. `color="danger"` styles a destructive action. Avoid nesting interactive controls inside a row rendered as a button.
```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { ListItem } from 'twenty-ui/primitives/navigation';
type ContactRowProps = { onOpen: () => void };
export const ContactRow = ({ onOpen }: ContactRowProps) => (
}
>
Alex Morgan
);
```
## Props
The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.
Trailing content, such as buttons, rendered after the content.
Color of the text and icons. `danger` marks a destructive action.
Supporting text, placed according to `descriptionPlacement`.
Where the description renders: inline after the content or at the end of
the row.
Prevents clicks and applies the disabled style.
Icon rendered after the content.
Applies the highlighted style, for example to the focused item of a list.
Shows a chevron indicating that the item opens a submenu.
Keyboard shortcut keys displayed at the end of the row. Registering the
shortcut is up to the application.
Selection indicator: a check icon after the content or a checkbox before
it.
Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a `ReactElement` or a function that returns the element to render.
Whether the item is selected. Shows the check or checkbox indicator when
`indicator` is set.
Icon rendered before the content.