ListItem

Vertical list items for menus or collections of related entries.

Last updated 6/26/2026

Variants

Combine text, icons, and notification badges. Use a trailing element when linking to details.

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>
  );
}

States

There are four states. Use Disabled for inactive menu items and Selected when an item is chosen.

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>
  );
}