ListItemリストアイテム

関連する項目を縦に並べて、メニューや一覧を構成するためのコンポーネントです。

更新 2026/6/26

バリエーション

テキストやアイコン、通知バッジを組み合わせて使用できます。一覧から詳細にリンクする際は、Trailing Elementを使用してください。

Title Only

リストタイトル

Heading Element

リストタイトル

Multiple Lines

リストタイトル補足テキスト

Sub Description

リストタイトル補足テキスト10分前

Large Heading Element

リストタイトル補足テキスト

Trailing Element

リストタイトル

With Badge

リストタイトル補足テキスト
3

import { List, ListItem } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function TypeSample() {
  return (
    <Dl variant="dim">
      <Dt>Title Only</Dt>
      <Dd>
        <List>
          <ListItem title="リストタイトル" />
        </List>
      </Dd>

      <Dt>Heading Element</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            headingElement={<SerendieSymbol name={"placeholder"} />}
          />
        </List>
      </Dd>

      <Dt>Multiple Lines</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            description="補足テキスト"
            headingElement={<SerendieSymbol name={"placeholder"} />}
          />
        </List>
      </Dd>

      <Dt>Sub Description</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            description="補足テキスト"
            subDescription="10分前"
            headingElement={<SerendieSymbol name={"placeholder"} />}
          />
        </List>
      </Dd>

      <Dt>Large Heading Element</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            description="補足テキスト"
            headingElement={<SerendieSymbol name={"placeholder"} />}
            isLargeHeadingElement
          />
        </List>
      </Dd>

      <Dt>Trailing Element</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            trailingElement={<SerendieSymbol name={"chevron-right"} />}
          />
        </List>
      </Dd>

      <Dt>With Badge</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            description="補足テキスト"
            headingElement={<SerendieSymbol name={"placeholder"} />}
            isLargeHeadingElement
            badge={3}
          />
        </List>
      </Dd>
    </Dl>
  );
}

状態

4つの状態があります。メニューにおいて非活性状態を示すときにDisabledを、選択状態を示すときにSelectedを使用してください。

Enabled

リストタイトル

Focused

リストタイトル

Disabled

リストタイトル

Selected

リストタイトル

import { List, ListItem } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function StateSample() {
  return (
    <Dl>
      <Dt>Enabled</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            headingElement={<SerendieSymbol name={"placeholder"} />}
          />
        </List>
      </Dd>
      <Dt>Focused</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            headingElement={<SerendieSymbol name={"placeholder"} />}
            focusVisible
          />
        </List>
      </Dd>
      <Dt>Disabled</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            headingElement={<SerendieSymbol name={"placeholder"} />}
            disabled
          />
        </List>
      </Dd>
      <Dt>Selected</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            headingElement={<SerendieSymbol name={"placeholder"} />}
            selected
          />
        </List>
      </Dd>
    </Dl>
  );
}