> ## 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

> أنشئ صفوفًا متسقة باستخدام الأيقونات والأوصاف والمؤشرات والإجراءات.

## نظرة عامة

يوفر `ListItem` التخطيط المرئي المشترك بين صفوف القوائم والقوائم المنسدلة. يعرض عنصر `div` افتراضيًا للمحتوى غير التفاعلي. استخدم [ListItemButton](https://docs.twenty.com/ar/ui/components/navigation/list-item-button.md) لصفوف الإجراءات العادية. كوّن `ListItem` باستخدام رابط للتنقل أو باستخدام عنصر دلالي مخصص عند الحاجة. استخدم [Dropdown](https://docs.twenty.com/ar/ui/components/navigation/dropdown.md) أو [Select](https://docs.twenty.com/ar/ui/primitives/input/select.md) عندما تحتاج إلى مالك كامل للنافذة المنبثقة أو التحديد.

**Light**

[مثال ListItem (light)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال ListItem (dark)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-navigation-listitem--display)

## استخدام

```tsx theme={null}
import { IconBell } from 'twenty-ui/icon';
import { ListItem } from 'twenty-ui/primitives/navigation';

export const NotificationRow = () => (
  <ListItem startIcon={<IconBell />}>Notifications</ListItem>
);
```

## البنية التشريحية

يكشف `ListItem` عن فتحات محتوى عبر الخصائص. ترتب هذه الفتحات المحتوى داخل صف واحد؛ وهي ليست مكونات مُصدَّرة بشكل منفصل.

```text theme={null}
ListItem
├── startIcon
├── children
├── description
├── actions
└── endIcon
```

| الفتحة | المتطلبة | الغرض |
| - | - | - |
| `children` | مطلوب لتسمية صف مرئية | يوفر النص الرئيسي. |
| `startIcon`, `endIcon` | اختياري | أضف أيقونات أو صورًا رمزية أو بيانات وصفية أو عناصر تحكم مستقلة عند أي من الطرفين. |
| `description` | اختياري | يضيف محتوى داعمًا بشكل مضمن أو أسفل التسمية أو في النهاية. |
| `الإجراءات` | اختياري | يضيف محتوى لاحقًا، مثل إجراء قابل للتركيز بشكل منفصل. |
| `indicator`، `shortcut`، `hasSubmenu` | اختياري | اضبط علامات التحديد المضمنة وتلميحات الاختصارات ومؤشر القائمة الفرعية. |

يوفر الصف التخطيط. يقبل `render` عنصراً أو دالة استدعاء تتلقى الخصائص الأصلية والحالة المرئية. انشر تلك الخصائص على الجذر الفعلي عند استخدام دالة استدعاء. تصل السمات الأصلية، ومعالجات الأحداث، و`className`، و`style`، و`ref` إلى ذلك الجذر. بالنسبة إلى صف يحتوي على أزرار إجراءات مستقلة، أبقِ الصف نفسه غير تفاعلي لكي تظل تلك الأزرار عناصر تحكم منفصلة.

## صفوف متعددة الأسطر

عيّن `descriptionPlacement="below"` لوضع المحتوى الداعم أسفل التسمية. يحتفظ العنوان بسلوك الاقتطاع الحالي، ويلتف المحتوى الداعم وفقًا للعرض المتاح. يحتفظ الموضع الافتراضي `inline` وموضع `end` بمظهرهما الحالي.

**Light**

[مثال على ListItem متعدد الأسطر (light)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem-multiline--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال على ListItem متعدد الأسطر (dark)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem-multiline--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-navigation-listitem-multiline--display)

```tsx theme={null}
import { Avatar } from 'twenty-ui/primitives/data-display';
import { ListItem } from 'twenty-ui/primitives/navigation';
import { Text } from 'twenty-ui/primitives/typography';

export const PlanningRow = () => (
  <ListItem
    descriptionPlacement="below"
    startIcon={<Avatar name="Alex Morgan" size="md" imageProps={{ alt: '' }} />}
    description="Review the proposed timeline and confirm the next steps with the team."
    endIcon={
      <Text render={<span />} size="sm" color="secondary">
        09:48
      </Text>
    }
  >
    Quarterly planning
  </ListItem>
);
```

للحصول على معاينات أقصر، مرّر مكوّن [نص](https://docs.twenty.com/ar/ui/primitives/typography/text.md) مع `truncate` أو `lineClamp` بوصفه `description`. يتحكم المحتوى المخصص في تخطيطه وتسمياته المتاحة بنفسه.

### حالات مرئية مستقلة

تعود جميع الحالات المرئية إلى المستدعي. يحدد `active` الصف المفتوح أو الحالي من دون تحديده. يمثل `selected` التحديد، ويمثل `focused` تمييز التنقل بلوحة المفاتيح من دون نقل تركيز DOM. يطبق `active` خلفية الصف الحالي. عيّن `selectionAppearance="accent"` للحصول على تعبئة بارزة في الصفوف المحددة، بشكل مستقل عن موضع الوصف. يحافظ المظهر الافتراضي على تنسيق التحديد الحالي المعتمد على المؤشر. يطبق `focused` الخلفية المميزة المشتركة، بما في ذلك عندما يستخدمها مالك للتمييز بالمؤشر. يتبع مخطط التركيز المرئي تركيز لوحة المفاتيح الفعلي على الجذر أو عناصر التحكم التابعة له.

لا تضيف هذه الخصائص حالات متاحة. زوّد المالك الدلالي المناسب بحالة `aria-current` أو `aria-selected` أو `checked` الخاصة بعنصر تحكم. يحتفظ التركيز الفعلي للوحة المفاتيح أيضًا بمخطط التركيز المرئي الأصلي.

### عناصر تحكم مستقلة

احتفظ بجذر `div` الافتراضي عندما يحتوي الصف على مربع اختيار حقيقي أو أزرار إجراءات مستقلة. استخدم `startIcon` لمربع الاختيار و`actions` للأزرار. لا حاجة إلى `indicator` الزخرفي عندما يعرض مربع اختيار حقيقي التحديد بالفعل.

```tsx theme={null}
import { useState } from 'react';
import { Button, Checkbox } from 'twenty-ui/primitives/input';
import { ListItem } from 'twenty-ui/primitives/navigation';

type SelectablePlanningRowProps = {
  active?: boolean;
  disabled?: boolean;
  onOpen: () => void;
};

export const SelectablePlanningRow = ({
  active = false,
  disabled = false,
  onOpen,
}: SelectablePlanningRowProps) => {
  const [selected, setSelected] = useState(false);

  return (
    <ListItem
      active={active}
      selected={selected}
      selectionAppearance="accent"
      disabled={disabled}
      descriptionPlacement="below"
      description="Review the proposed timeline and confirm the next steps with the team."
      startIcon={
        <Checkbox
          aria-label="Select quarterly planning"
          checked={selected}
          onCheckedChange={setSelected}
          disabled={disabled}
        />
      }
      actions={
        <Button variant="ghost" size="sm" onClick={onOpen} disabled={disabled}>
          Open
        </Button>
      }
    >
      Quarterly planning
    </ListItem>
  );
};
```

التحديد والفتح تفاعلان منفصلان. يمتلك التطبيق انتشار الأحداث وأي تنشيط للصف أو سياسة للوحة المفاتيح. يغير `ListItem.disabled` المظهر فقط؛ مرّر `disabled` إلى كل عنصر تحكم حقيقي لمنع تنشيطه.

ينطبق سلوك رؤية الإجراءات الحالي على الصفوف متعددة الأسطر: يكشف `actionsVisibility="hover"` عن الإجراءات عند التمرير أو التركيز داخل الصف، ويبقيها مرئية على أجهزة اللمس. عيّنه إلى `always` للإجراءات المستمرة، بما في ذلك أثناء فتح نافذة منبثقة يملكها المستدعي. عند عرض صف يبلغ 480px أو أقل، تنتقل الإجراءات متعددة الأسطر إلى سطر خاص بها وتلتف حسب الحاجة.

## صف الإجراء

استخدم [ListItemButton](https://docs.twenty.com/ar/ui/components/navigation/list-item-button.md) لدمج تنسيق الصف مع تفاعل الزر الأصلي. مرّر `disabled` مرة واحدة للتحكم في كل من المظهر والتفعيل.

```tsx theme={null}
import { ListItemButton } from 'twenty-ui/components/navigation';
import { IconCopy } from 'twenty-ui/icon';

type DuplicateActionProps = {
  onDuplicate: () => void;
  disabled?: boolean;
};

export const DuplicateAction = ({
  onDuplicate,
  disabled = false,
}: DuplicateActionProps) => (
  <ListItemButton
    disabled={disabled}
    startIcon={<IconCopy />}
    description="Create a copy"
    onClick={onDuplicate}
  >
    Duplicate
  </ListItemButton>
);
```

لا يزال بإمكان مالك زر مخصص تكوين `ListItem` عبر `render`. يوفر ذلك المالك التركيز الأصلي، والتفعيل بمفتاحي Enter وSpace، وسلوك التعطيل. يوفر `ListItem.disabled` النمط المرئي المطابق فقط. يعرض `shortcut` التلميحات؛ ويسجل تطبيقك الاختصارات.

**Light**

[تكوين زر مخصص (light)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem--button-owner\&viewMode=story\&globals=colorScheme:light)

**Dark**

[تكوين زر مخصص (dark)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem--button-owner\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-navigation-listitem--button-owner)

## التنقل والروابط الصريحة

مرّر رابط ارتساء عبر `render` عندما ينتقل الصف بأكمله. ضع سمات رابط الارتساء، بما في ذلك `href` و`target` و`rel`، على ذلك العنصر.

```tsx theme={null}
import { ListItem } from 'twenty-ui/primitives/navigation';

export const DocumentationLink = () => (
  <ListItem render={<a href="https://twenty.com/developers" />}>
    Typography documentation
  </ListItem>
);
```

**Light**

[صف الرابط (light)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem--link-owner\&viewMode=story\&globals=colorScheme:light)

**Dark**

[صف الرابط (dark)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem--link-owner\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-navigation-listitem--link-owner)

تظل تسميات السلاسل النصية نصاً، بما في ذلك السلاسل التي تبدو كعناوين URL. لا ينشئ ListItem روابط. لربط جزء من صف غير تفاعلي، وفّر رابط ارتساء كمحتوى يملكه المستدعي. أبقِ ذلك الصف كـ `div` لتجنب الروابط أو الأزرار المتداخلة. تحتفظ تسميات السلاسل النصية باقتطاعها وتلميح الأدوات عند التجاوز؛ ويمكن للمحتوى المخصص استخدام [OverflowingTextWithTooltip](https://docs.twenty.com/ar/ui/primitives/typography/overflowing-text-with-tooltip.md) مع رابط ارتساء معروض صراحةً.

لا تحتوي الروابط على سمة `disabled` أصلية. إذا كانت الوجهة غير متاحة، فيجب على مالك الرابط توفير الدلالات المناسبة وترتيب التنقل بالضغط على Tab وسياسة التنقل. لا يمنع تنسيقه باستخدام `ListItem.disabled` وحده التنقل.

## مالك عنصر النافذة المنبثقة

استخدم `Dropdown.ActionItem` أو `Dropdown.OptionItem` داخل مالك النافذة المنبثقة الخاص بهما. تكوّن هذه الأجزاء بالفعل تخطيط ListItem وتكشف فتحاته المرئية. يوفر مالك النافذة المنبثقة الأدوار والتركيز والتنقل بلوحة المفاتيح والتفعيل وسلوك التعطيل.

```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { Dropdown } from 'twenty-ui/components/navigation';

type RecordActionsProps = { onDuplicate: () => void };

export const RecordActions = ({ onDuplicate }: RecordActionsProps) => (
  <Dropdown.Root type="menu">
    <Dropdown.Trigger render={<Button>Record actions</Button>} />
    <Dropdown.Content>
      <Dropdown.ActionItem onClick={onDuplicate}>
        Duplicate record
      </Dropdown.ActionItem>
      <Dropdown.ActionItem disabled>Unavailable action</Dropdown.ActionItem>
    </Dropdown.Content>
  </Dropdown.Root>
);
```

**Light**

[مالك عنصر Dropdown (light)](https://storybook.twenty.com/iframe.html?id=ui-components-dropdown--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مالك عنصر Dropdown (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-dropdown--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-dropdown--display)

## سياسة الأحداث الأصلية

يمرر ListItem كائنات الأحداث الأصلية ومعالجاتها. تنتشر النقرات بشكل طبيعي، بما في ذلك النقرات على عناصر تحكم الإجراءات اللاحقة. ضع أي حد مقصود على المالك التفاعلي أو معالج المستدعي.

```tsx theme={null}
import { ListItem } from 'twenty-ui/primitives/navigation';

type OpenRecordProps = { onOpen: () => void };

export const OpenRecord = ({ onOpen }: OpenRecordProps) => (
  <ListItem
    render={<button type="button" />}
    onClick={(event) => {
      event.stopPropagation();
      onOpen();
    }}
  >
    Open record
  </ListItem>
);
```

يمتلك المستدعي أيضاً أي سياسة لـ `preventDefault()`، مثل منع تنقل الرابط. تمرير `onClick` لا يضيف دوراً، ولا يجعل `div` قابلاً للتشغيل بلوحة المفاتيح، ولا يغير الانتشار.

## السحب والتنقل في المحرر المملوكان للتطبيق

أنشئ صفوفًا قابلة لإعادة الترتيب باستخدام `ListItem` داخل مضيف السحب في تطبيقك. ضع سمات السحب ومستمعيه الخاصة بالمضيف على مقبضه، ومرر المقبض أو أداة الإمساك عبر `startIcon`. احتفظ بعناصر تحكم مستقلة للرؤية والتحرير والحذف في `actions`. يتولى مضيف السحب إعادة الترتيب بالمؤشر ولوحة المفاتيح، وتعطيل السحب، وتسميات المقابض المتاحة.

بالنسبة إلى اقتراحات المحرر، احتفظ بمربع القائمة الحالي للمحرر ومالك الخيار النشط. اعرض كل `ListItem` باستخدام `role="option"` و`aria-selected`، واستخدم `focused` لمظهر الصف النشط. يتولى المحرر التنقل بالأسهم والتفعيل باستخدام Enter بينما يبقى التركيز في سطح التحرير. امنع تغييرات التركيز عند الضغط بالمؤشر عندما يتطلبها المحرر، وتعامل مع تحديد المؤشر في معالج الصف الخاص بالتطبيق.

بالنسبة إلى الاقتراحات في صفحة Dropdown، استخدم `Dropdown.OptionItem` أو `Dropdown.ActionItem` لكي تتولى تلك الصفحة التنقل والتفعيل. لا تضف معالجًا ثانيًا لـ Enter أو Space إلى مالك يتم تفعيله بالفعل من لوحة المفاتيح.

## صف الإعدادات

استخدم [SettingsRow](https://docs.twenty.com/ar/ui/components/settings/settings-row.md) لصف مفتاح تبديل مُسمّى. يُنشئ تركيبًا من `ListItem` و`Switch`، ويدير ارتباطهما المتاح، ويستخدم حالة التعطيل الخاصة بالمفتاح لمظهر الصف.

## مؤشر التحديد

```tsx theme={null}
import { useState } from 'react';
import { ListItem } from 'twenty-ui/primitives/navigation';

export const ShowArchivedToggle = () => {
  const [selected, setSelected] = useState(false);

  return (
    <ListItem
      render={<button type="button" aria-pressed={selected} />}
      selected={selected}
      indicator="check"
      onClick={() => setSelected(!selected)}
    >
      Show archived records
    </ListItem>
  );
};
```

يتحكم كل من `active` و`selected` و`focused` و`disabled` بشكل مستقل في تنسيق الصف. لا تسجل إجراءات، ولا تنقل تركيز DOM، ولا تضيف أدواراً أو حالات يمكن الوصول إليها، ولا تمنع الأحداث. مؤشرا `check` و`checkbox` زخرفيان؛ استخدم [Checkbox](https://docs.twenty.com/ar/ui/primitives/input/checkbox.md) حقيقياً لعنصر تحكم في نموذج. عيّن `aria-pressed` أو `aria-selected` أو دلالات حالة أخرى على المالك الذي يحتاج إليها.

## صفوف المنتقي

التحديد تابع للعنصر الأصل. لا يحتوي `ListItem` على حالة تحديد غير مضبوطة: مرّر `selected` وحدّثه من `onClick`. استخدم `indicator="check"` لخيار واحد و`indicator="checkbox"` لخيارات متعددة. كلا المؤشرين زخرفي؛ ويتولى المالك التفاعلي التفعيل.

في مربع قائمة موجود، مرّر `role="option"` و`aria-selected`، وأبقِ التركيز ومعالجة مفاتيح الأسهم في مربع القائمة. للحصول على عنصر واجهة اختيار كامل، استخدم [Select](https://docs.twenty.com/ar/ui/primitives/input/select.md). يمكن لأزرار الاختيار المستقلة استخدام `aria-pressed`، كما في هذه الأمثلة.

### اختيار واحد

ضع [Avatar](https://docs.twenty.com/ar/ui/primitives/data-display/avatar.md) في `startIcon` لتعريف سجل. استخدم `description` للنص الداعم، و`descriptionPlacement="end"` لقيمة لاحقة.

**Light**

[صفوف اختيار واحد (light)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem-picker--single-selection\&viewMode=story\&globals=colorScheme:light)

**Dark**

[صفوف اختيار واحد (dark)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem-picker--single-selection\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-navigation-listitem-picker--single-selection)

```tsx theme={null}
import { useState } from 'react';
import { Avatar } from 'twenty-ui/primitives/data-display';
import { ListItem } from 'twenty-ui/primitives/navigation';

export const AssigneeButtons = () => {
  const [assignee, setAssignee] = useState<string | null>(null);

  return (
    <div role="group" aria-label="Assignee">
      {['Alex Morgan', 'Sam Taylor'].map((name) => (
        <ListItem
          key={name}
          render={<button type="button" />}
          aria-pressed={assignee === name}
          selected={assignee === name}
          indicator="check"
          startIcon={<Avatar name={name} size="md" imageProps={{ alt: '' }} />}
          onClick={() => setAssignee(name)}
        >
          {name}
        </ListItem>
      ))}
    </div>
  );
};
```

### اختيار متعدد

استخدم [Tag](https://docs.twenty.com/ar/ui/primitives/data-display/tag.md) كمحتوى الصف للقيم ذات العلامات، أو ضع [ColorSample](https://docs.twenty.com/ar/ui/primitives/data-display/color-sample.md) في `startIcon` لاختيار لون. يمكن أن يحتوي الصف أيضاً على نص عادي أو صورة رمزية.

**Light**

[صفوف اختيار متعدد (light)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem-picker--multiple-selection\&viewMode=story\&globals=colorScheme:light)

**Dark**

[صفوف اختيار متعدد (dark)](https://storybook.twenty.com/iframe.html?id=ui-navigation-listitem-picker--multiple-selection\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-navigation-listitem-picker--multiple-selection)

```tsx theme={null}
import { useState } from 'react';
import { Tag } from 'twenty-ui/primitives/data-display';
import { ListItem } from 'twenty-ui/primitives/navigation';

export const TeammateButtons = () => {
  const [teammates, setTeammates] = useState<string[]>([]);

  const toggleTeammate = (name: string) => {
    setTeammates((current) =>
      current.includes(name)
        ? current.filter((teammate) => teammate !== name)
        : [...current, name],
    );
  };

  return (
    <div role="group" aria-label="Teammates">
      {['Alex Morgan', 'Sam Taylor'].map((name) => (
        <ListItem
          key={name}
          render={<button type="button" />}
          aria-pressed={teammates.includes(name)}
          selected={teammates.includes(name)}
          indicator="checkbox"
          onClick={() => toggleTeammate(name)}
        >
          <Tag color="blue">{name}</Tag>
        </ListItem>
      ))}
    </div>
  );
};
```

مؤشر مربع الاختيار ليس عنصر تحكم في نموذج ولا يرسل قيمة. استخدم [Checkbox](https://docs.twenty.com/ar/ui/primitives/input/checkbox.md) عندما تحتاج إلى المشاركة في نموذج. عيّن `disabled` الأصلي على الزر المعروض لمنع التفعيل وإزالته من ترتيب التنقل بالضغط على Tab. مرّر أيضاً `ListItem.disabled` لمظهره المرئي.

## فتحات

استخدم `startIcon` و`endIcon` للأيقونات أو المحتوى الذي يملكه المستدعي، و`description` للنص الداعم، و`actions` للمحتوى اللاحق، و`hasSubmenu` لمؤشر قائمة فرعية. يقبل `descriptionPlacement` القيم `inline` أو `end` أو `below`. ينسق `color="danger"` إجراءً إتلافيًا. تجنب تداخل عناصر التحكم التفاعلية داخل صف معروض كزر.

```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) => (
  <ListItem
    description="Account owner"
    actions={
      <Button
        type="button"
        aria-label="Open Alex Morgan's profile"
        variant="ghost"
        size="sm"
        onClick={onOpen}
      >
        Open
      </Button>
    }
  >
    Alex Morgan
  </ListItem>
);
```

## التسميات العربية

استخدم `shortcutJoinLabel` لتخصيص النص بين خطوات الاختصار المتسلسلة. تكون قيمته الافتراضية `then`؛ وتزيل السلسلة الفارغة نص الربط. تتوفر الخاصية نفسها في أجزاء عنصر `Dropdown`.

## الإزاحة

يُنشأ المرجع من الأنواع العامة للمكوّنات. تُقبل سمات ومعالجات `div` الأصلية، بما في ذلك الأسماء القابلة للوصول والأحداث الأصلية. ضع السمات الخاصة بالزر أو رابط الارتساء على العنصر الموفّر عبر `render`. يستهدف كل من `ref` ومرجع العنصر المعروض الجذر الفعلي لـ DOM.

**actions** `ReactNode`

Trailing content, such as buttons, rendered after the content.

**actionsPlacement** `"auto" | "end"` (default: auto)

Keeps actions beside the content at every width when set to `end`. The default `auto` preserves responsive wrapping. Hidden end actions do not reserve width on devices without touch.

**actionsVisibility** `"always" | "hover"` (default: hover)

When trailing actions are visible: on hover and focus, or always.

**active** `boolean` (default: false)

Marks the open or current item independently of selection and focus. Does not add accessible state or activate the item.

**color** `"danger" | "neutral"` (default: neutral)

Color of the text and icons. `danger` marks a destructive action.

**description** `ReactNode`

Supporting text, placed according to `descriptionPlacement`.

**descriptionPlacement** `"below" | "end" | "inline"` (default: inline)

Places supporting content inline after the label, at the end, or below it with wrapping. Inline is the default.

**disabled** `boolean` (default: false)

Applies disabled styling only. Set native disabled behavior and accessible semantics on the button, link, or popup item owner.

**endIcon** `ReactNode`

Icon rendered after the content.

**focused** `boolean` (default: false)

Applies highlighted styling without moving DOM focus or handling keyboard navigation.

**hasSubmenu** `boolean` (default: false)

Shows a chevron indicating that the item opens a submenu.

**indicator** `"check" | "checkbox" | "none"` (default: none)

Selection indicator: a check icon after the content or a checkbox before
it.

**ref** `Ref\<HTMLElement\>`

Ref to the actual DOM root, including a composed native button or link.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, ListItemState\>`

Composes the row with an element or render callback. The owner supplies interaction semantics, native attributes, and behavior.

**selected** `boolean` (default: false)

Applies selected styling and the configured decorative indicator. Selection state and accessible semantics belong to the owner.

**selectionAppearance** `"accent" | "default"` (default: default)

Selection styling independent of description placement. `default` preserves indicator-based styling; `accent` fills selected rows with the accent background.

**shortcut** `ShortcutDefinition`

Keyboard shortcut keys displayed at the end of the row. Registering the
shortcut is up to the application.

**shortcutJoinLabel** `string`

Text between sequential shortcut steps. Defaults to `then`; pass an empty string to omit it.

**startIcon** `ReactNode`

Icon rendered before the content.

مرر `shortcut={['Mod', 'Enter']}` للمفاتيح المتزامنة أو `shortcut={[['G'], ['P']]}` للضغطات المتتالية. راجع [Shortcut](https://docs.twenty.com/ar/ui/primitives/typography/shortcut.md) للتعرف على التركيبات المتداخلة ومنسق السلاسل المشترك.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.