List

리스트 헤더

기본 리스트 아이템
아이콘이 있는 리스트 아이템
부가 정보가 포함된 설명

import { List, ListDivider, ListItem } from "seed-design/ui/list";
import { ListHeader } from "seed-design/ui/list-header";
import {
  IconILowercaseSerifCircleLine,
  IconPersonCircleLine,
} from "@karrotmarket/react-monochrome-icon";
import { Icon, VStack } from "@seed-design/react";

export default function ListPreview() {
  return (
    <VStack width="360px">
      <ListHeader as="h2">리스트 헤더</ListHeader>
      <List width="full">
        <ListItem title="기본 리스트 아이템" />
        <ListDivider />
        <ListItem
          prefix={<Icon svg={<IconPersonCircleLine />} />}
          title="아이콘이 있는 리스트 아이템"
          detail="부가 정보가 포함된 설명"
          suffix={<Icon svg={<IconILowercaseSerifCircleLine />} />}
        />
      </List>
    </VStack>
  );
}

Installation

npx @seed-design/cli@latest add ui:list

pnpm dlx @seed-design/cli@latest add ui:list

yarn dlx @seed-design/cli@latest add ui:list

bun x @seed-design/cli@latest add ui:list

의존성 설치

npm install @seed-design/css @seed-design/react

yarn add @seed-design/css @seed-design/react

pnpm add @seed-design/css @seed-design/react

bun add @seed-design/css @seed-design/react

아래 코드를 복사 후 붙여넣고 사용하세요

/**
 * @file ui:list
 * @requires @seed-design/react@^2.0.0
 * @requires @seed-design/css@^2.0.0
 **/

"use client";

import {
  List as SeedList,
  Divider as SeedDivider,
  type DividerProps as SeedDividerProps,
} from "@seed-design/react";
import {
  Checkbox as CheckboxPrimitive,
  RadioGroup as RadioGroupPrimitive,
  Switch as SwitchPrimitive,
} from "@seed-design/react/primitive";
import { listItem } from "@seed-design/css/recipes/list-item";
import * as React from "react";

export interface ListProps extends SeedList.RootProps {}

/**
 * @see https://seed-design.io/react/components/list
 */
export const List = SeedList.Root;

export interface ListItemProps
  extends Omit<SeedList.ItemProps, "title" | "prefix" | "asChild" | "children"> {
  title: React.ReactNode;
  detail?: React.ReactNode;
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;
}

/**
 * @see https://seed-design.io/react/components/list
 */
export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
  ({ title, detail, prefix, suffix, ...otherProps }, ref) => {
    return (
      <SeedList.Item ref={ref} {...otherProps}>
        {prefix && <SeedList.Prefix>{prefix}</SeedList.Prefix>}
        <SeedList.Content>
          <SeedList.Title>{title}</SeedList.Title>
          {detail && <SeedList.Detail>{detail}</SeedList.Detail>}
        </SeedList.Content>
        {suffix && <SeedList.Suffix>{suffix}</SeedList.Suffix>}
      </SeedList.Item>
    );
  },
);
ListItem.displayName = "ListItem";

type ListItemBaseProps = Omit<SeedList.ItemProps, keyof React.HTMLAttributes<HTMLLIElement>>;

export interface ListButtonItemProps
  extends Omit<
    ListItemBaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>,
    "title" | "prefix" | "asChild" | "children"
  > {
  title: React.ReactNode;
  detail?: React.ReactNode;
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;

  rootRef?: React.Ref<HTMLLIElement>;
  rootProps?: React.HTMLAttributes<HTMLLIElement>;
}

/**
 * @see https://seed-design.io/react/components/list
 */
export const ListButtonItem = React.forwardRef<HTMLButtonElement, ListButtonItemProps>(
  ({ title, detail, prefix, suffix, alignItems, rootRef, rootProps, ...props }, ref) => {
    const [variantProps, otherProps] = listItem.splitVariantProps(props);

    const stateProps = React.useMemo(
      () => ({ "data-disabled": otherProps.disabled ? "" : undefined }),
      [otherProps.disabled],
    );

    return (
      <SeedList.Item ref={rootRef} alignItems={alignItems} {...variantProps} {...rootProps}>
        {prefix && <SeedList.Prefix {...stateProps}>{prefix}</SeedList.Prefix>}
        <SeedList.Content asChild>
          <button type="button" ref={ref} {...otherProps}>
            <SeedList.Title {...stateProps}>{title}</SeedList.Title>
            {detail && <SeedList.Detail {...stateProps}>{detail}</SeedList.Detail>}
          </button>
        </SeedList.Content>
        {suffix && <SeedList.Suffix {...stateProps}>{suffix}</SeedList.Suffix>}
      </SeedList.Item>
    );
  },
);
ListButtonItem.displayName = "ListButtonItem";

export interface ListLinkItemProps
  extends Omit<
    ListItemBaseProps & React.AnchorHTMLAttributes<HTMLAnchorElement>,
    "title" | "prefix" | "asChild" | "children"
  > {
  title: React.ReactNode;
  detail?: React.ReactNode;
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;

  rootRef?: React.Ref<HTMLLIElement>;
  rootProps?: React.HTMLAttributes<HTMLLIElement>;
}

/**
 * @see https://seed-design.io/react/components/list
 */
export const ListLinkItem = React.forwardRef<HTMLAnchorElement, ListLinkItemProps>(
  ({ title, detail, prefix, suffix, alignItems, rootRef, rootProps, ...props }, ref) => {
    const [variantProps, otherProps] = listItem.splitVariantProps(props);

    return (
      <SeedList.Item ref={rootRef} alignItems={alignItems} {...variantProps} {...rootProps}>
        {prefix && <SeedList.Prefix>{prefix}</SeedList.Prefix>}
        <SeedList.Content asChild>
          <a ref={ref} {...otherProps}>
            <SeedList.Title>{title}</SeedList.Title>
            {detail && <SeedList.Detail>{detail}</SeedList.Detail>}
          </a>
        </SeedList.Content>
        {suffix && <SeedList.Suffix>{suffix}</SeedList.Suffix>}
      </SeedList.Item>
    );
  },
);
ListLinkItem.displayName = "ListLinkItem";

export interface ListSwitchItemProps
  extends Omit<
    ListItemBaseProps & SwitchPrimitive.RootProps,
    "title" | "prefix" | "asChild" | "children"
  > {
  title: React.ReactNode;
  detail?: React.ReactNode;
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;

  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;

  rootRef?: React.Ref<HTMLLabelElement>;
}

/**
 * @see https://seed-design.io/react/components/list
 */
export const ListSwitchItem = React.forwardRef<HTMLInputElement, ListSwitchItemProps>(
  ({ title, detail, prefix, suffix, inputProps, alignItems, rootRef, ...props }, ref) => {
    const [variantProps, otherProps] = listItem.splitVariantProps(props);

    return (
      <SeedList.Item {...variantProps} alignItems={alignItems} asChild>
        <SwitchPrimitive.Root ref={rootRef} {...otherProps}>
          {prefix && <SeedList.Prefix>{prefix}</SeedList.Prefix>}
          <SeedList.Content>
            <SeedList.Title>{title}</SeedList.Title>
            {detail && <SeedList.Detail>{detail}</SeedList.Detail>}
          </SeedList.Content>
          {suffix && <SeedList.Suffix>{suffix}</SeedList.Suffix>}
          <SwitchPrimitive.HiddenInput ref={ref} {...inputProps} />
        </SwitchPrimitive.Root>
      </SeedList.Item>
    );
  },
);
ListSwitchItem.displayName = "ListSwitchItem";

export interface ListCheckItemProps
  extends Omit<
    ListItemBaseProps & CheckboxPrimitive.RootProps,
    "title" | "prefix" | "asChild" | "children"
  > {
  title: React.ReactNode;
  detail?: React.ReactNode;
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;

  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;

  rootRef?: React.Ref<HTMLLabelElement>;
}

/**
 * @see https://seed-design.io/react/components/list
 */
export const ListCheckItem = React.forwardRef<HTMLInputElement, ListCheckItemProps>(
  ({ title, detail, prefix, suffix, inputProps, alignItems, rootRef, ...props }, ref) => {
    const [variantProps, otherProps] = listItem.splitVariantProps(props);

    return (
      <SeedList.Item {...variantProps} alignItems={alignItems} asChild>
        <CheckboxPrimitive.Root ref={rootRef} {...otherProps}>
          {prefix && <SeedList.Prefix>{prefix}</SeedList.Prefix>}
          <SeedList.Content>
            <SeedList.Title>{title}</SeedList.Title>
            {detail && <SeedList.Detail>{detail}</SeedList.Detail>}
          </SeedList.Content>
          {suffix && <SeedList.Suffix>{suffix}</SeedList.Suffix>}
          <CheckboxPrimitive.HiddenInput ref={ref} {...inputProps} />
        </CheckboxPrimitive.Root>
      </SeedList.Item>
    );
  },
);
ListCheckItem.displayName = "ListCheckItem";

export interface ListRadioItemProps
  extends Omit<
    ListItemBaseProps & RadioGroupPrimitive.ItemProps,
    "title" | "prefix" | "asChild" | "children"
  > {
  title: React.ReactNode;
  detail?: React.ReactNode;
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;

  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;

  rootRef?: React.Ref<HTMLLabelElement>;
}

/**
 * @see https://seed-design.io/react/components/list
 */
export const ListRadioItem = React.forwardRef<HTMLInputElement, ListRadioItemProps>(
  ({ title, detail, prefix, suffix, inputProps, alignItems, rootRef, ...props }, ref) => {
    const [variantProps, otherProps] = listItem.splitVariantProps(props);

    return (
      <SeedList.Item {...variantProps} alignItems={alignItems} asChild>
        <RadioGroupPrimitive.Item ref={rootRef} {...otherProps}>
          {prefix && <SeedList.Prefix>{prefix}</SeedList.Prefix>}
          <SeedList.Content>
            <SeedList.Title>{title}</SeedList.Title>
            {detail && <SeedList.Detail>{detail}</SeedList.Detail>}
          </SeedList.Content>
          {suffix && <SeedList.Suffix>{suffix}</SeedList.Suffix>}
          <RadioGroupPrimitive.ItemHiddenInput ref={ref} {...inputProps} />
        </RadioGroupPrimitive.Item>
      </SeedList.Item>
    );
  },
);
ListRadioItem.displayName = "ListRadioItem";

export interface ListDividerProps extends SeedDividerProps {
  /**
   * @default "li"
   */
  as?: SeedDividerProps["as"];

  /**
   * @default true
   */
  "aria-hidden"?: SeedDividerProps["aria-hidden"];
}

/**
 * @see https://seed-design.io/react/components/list
 */
export const ListDivider = React.forwardRef<HTMLLIElement, ListDividerProps>(
  ({ as = "li", "aria-hidden": ariaHidden = true, ...props }, ref) => {
    return (
      <SeedDivider
        as={as}
        aria-hidden={ariaHidden}
        ref={ref as React.ForwardedRef<HTMLHRElement>}
        {...props}
      />
    );
  },
);
ListDivider.displayName = "ListDivider";

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

/**
 * @file ui:list
 * @requires @seed-design/react@^2.0.0
 * @requires @seed-design/css@^2.0.0
 **/

"use client";

import {
  ListHeader as SeedListHeader,
  type ListHeaderProps as SeedListHeaderProps,
} from "@seed-design/react";

export interface ListHeaderProps extends SeedListHeaderProps {}

/**
 * @see https://seed-design.io/react/components/list
 */
export const ListHeader = SeedListHeader;

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

Usage

import { ListHeader } from "seed-design/ui/list-header";
import { List, ListItem } from "seed-design/ui/list";

<VStack>
  <ListHeader as="h2">리스트 헤더</ListHeader>
  <List>
    <ListItem title="리스트 아이템 1" />
    <ListDivider />
    <ListItem title="리스트 아이템 2" />
  </List>
</VStack>

variant="mediumWeak"

variant="boldSolid"

List Header with Action Button

import { List, ListButtonItem } from "seed-design/ui/list";
import { ListHeader } from "seed-design/ui/list-header";
import { ActionButton } from "seed-design/ui/action-button";
import {
  IconChevronRightLine,
  IconLockLine,
  IconPersonCircleLine,
  IconQuestionmarkCircleFill,
} from "@karrotmarket/react-monochrome-icon";
import { Divider, Icon, PrefixIcon, VStack } from "@seed-design/react";

export default function () {
  return (
    <VStack gap="x6" py="x6" width="360px">
      <VStack>
        <ListHeader as="h2" variant="mediumWeak">
          variant="mediumWeak"
        </ListHeader>
        <List>
          <ListButtonItem
            title="내 계정"
            detail="이메일과 연락처, 본인 인증 관리"
            prefix={<Icon svg={<IconPersonCircleLine />} />}
            suffix={<Icon svg={<IconChevronRightLine />} size="18px" />}
          />
          <ListButtonItem
            title="보안 · 인증 관리"
            detail="비밀번호, 생체 인증 사용을 관리해요"
            prefix={<Icon svg={<IconLockLine />} />}
            suffix={<Icon svg={<IconChevronRightLine />} size="x4_5" />}
          />
        </List>
      </VStack>
      <Divider />
      <VStack>
        <ListHeader as="h2" variant="boldSolid">
          variant="boldSolid"
        </ListHeader>
        <List>
          <ListButtonItem
            title="내 계정"
            detail="이메일과 연락처, 본인 인증 관리"
            prefix={<Icon svg={<IconPersonCircleLine />} />}
            suffix={<Icon svg={<IconChevronRightLine />} size="18px" />}
          />
          <ListButtonItem
            title="보안 · 인증 관리"
            detail="비밀번호, 생체 인증 사용을 관리해요"
            prefix={<Icon svg={<IconLockLine />} />}
            suffix={<Icon svg={<IconChevronRightLine />} size="x4_5" />}
          />
        </List>
      </VStack>
      <Divider />
      <VStack>
        <ListHeader>
          <h2>List Header with Action Button</h2>
          <ActionButton
            variant="ghost"
            size="small"
            color="fg.neutralSubtle"
            fontWeight="medium"
            bleed="asPadding"
          >
            <PrefixIcon svg={<IconQuestionmarkCircleFill />} />
            도움말
          </ActionButton>
        </ListHeader>
        <List>
          <ListButtonItem
            title="내 계정"
            detail="이메일과 연락처, 본인 인증 관리"
            prefix={<Icon svg={<IconPersonCircleLine />} />}
            suffix={<Icon svg={<IconChevronRightLine />} size="18px" />}
          />
          <ListButtonItem
            title="보안 · 인증 관리"
            detail="비밀번호, 생체 인증 사용을 관리해요"
            prefix={<Icon svg={<IconLockLine />} />}
            suffix={<Icon svg={<IconChevronRightLine />} size="x4_5" />}
          />
        </List>
      </VStack>
    </VStack>
  );
}

Affixes (Prefix/Suffix)

Prefix에 Avatar 넣기
Amet elit ullamco magna.
Prefix에 아이콘 넣기
Deserunt nulla elit est.
Suffix에 Action Button 넣기
Veniam non est non ut consequat.
Suffix에 Action Button (Ghost) 넣기
Deserunt nulla elit est.
Suffix에 Toggle Button 넣기
Sit eu incididunt aute ea elit ex.

import {
  IconArrowUpBracketDownFill,
  IconILowercaseSerifCircleLine,
} from "@karrotmarket/react-monochrome-icon";
import { Icon } from "@seed-design/react";
import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import { Avatar } from "seed-design/ui/avatar";
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
import { List, ListDivider, ListItem } from "seed-design/ui/list";
import { ToggleButton } from "seed-design/ui/toggle-button";

export default function ListAffixes() {
  const [isToggleButtonPressed, setIsToggleButtonPressed] = useState(false);

  return (
    <List width="360px">
      <ListItem
        prefix={
          <Avatar
            size="48"
            src="https://avatars.githubusercontent.com/u/54893898?v=4"
            fallback={<IdentityPlaceholder />}
          />
        }
        title="Prefix에 Avatar 넣기"
        detail="Amet elit ullamco magna."
      />
      <ListDivider />
      <ListItem
        title="Prefix에 아이콘 넣기"
        detail="Deserunt nulla elit est."
        prefix={<Icon svg={<IconILowercaseSerifCircleLine />} />}
      />
      <ListDivider />
      <ListItem
        title="Suffix에 Action Button 넣기"
        detail="Veniam non est non ut consequat."
        suffix={
          <ActionButton variant="neutralWeak" size="xsmall">
            액션 버튼
          </ActionButton>
        }
      />
      <ListDivider />
      <ListItem
        title="Suffix에 Action Button (Ghost) 넣기"
        detail="Deserunt nulla elit est."
        suffix={
          <ActionButton size="small" variant="ghost" layout="iconOnly" aria-label="공유">
            <Icon svg={<IconArrowUpBracketDownFill />} />
          </ActionButton>
        }
      />
      <ListDivider />
      <ListItem
        title="Suffix에 Toggle Button 넣기"
        detail="Sit eu incididunt aute ea elit ex."
        suffix={
          <ToggleButton
            size="xsmall"
            pressed={isToggleButtonPressed}
            onPressedChange={setIsToggleButtonPressed}
          >
            {isToggleButtonPressed ? "선택됨" : "토글 버튼"}
          </ToggleButton>
        }
      />
    </List>
  );
}

Clickable List Items

ListButtonItem 또는 ListLinkItem를 사용해서 리스트 항목 전체를 클릭 가능하도록 만들 수 있습니다.

prefix 또는 suffix에 클릭할 수 있는 요소를 포함하는 경우 z-index: 1, position: relative, isolation: isolate 등의 스타일을 적용하여 클릭 이벤트가 리스트 항목과 별개로 동작하도록 하세요. ActionButton, ToggleButton 등 SEED React 컴포넌트는 추가적으로 스타일을 적용하지 않아도 됩니다.

ListItem은 클릭할 수 없어요. 눌러보세요.
우측의 Action Button만 클릭할 수 있어요
ListLinkItem도 클릭할 수 있어요. 눌러보세요.
리스트 항목 전체와 우측의 Action Button 각각을 클릭할 수 있어요

import {
  IconArrowUpRightLine,
  IconCheckmarkFill,
  IconChevronRightLine,
  IconPenHorizlineFill,
  IconPlusFill,
  IconSquare2StackedFill,
} from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon, Icon, Box } from "@seed-design/react";
import { useCallback, useState } from "react";
import { List, ListDivider, ListItem, ListButtonItem, ListLinkItem } from "seed-design/ui/list";
import { ActionButton } from "seed-design/ui/action-button";
import { ToggleButton } from "seed-design/ui/toggle-button";

const href = "https://www.daangn.com";

export default function ListClickable() {
  const [isSubscribed, setIsSubscribed] = useState(false);
  const [isCopied, setIsCopied] = useState(false);

  const onCopyClick = useCallback(() => {
    navigator.clipboard.writeText(href);
    setIsCopied(true);

    setTimeout(() => setIsCopied(false), 2000);
  }, []);

  return (
    <List width="full">
      <ListItem
        title="ListItem은 클릭할 수 없어요. 눌러보세요."
        detail="우측의 Action Button만 클릭할 수 있어요"
        suffix={
          <ActionButton
            variant="ghost"
            size="xsmall"
            color="fg.neutralMuted"
            onClick={() => alert("편집 클릭됨")}
          >
            <PrefixIcon svg={<IconPenHorizlineFill />} />
            편집
          </ActionButton>
        }
      />
      <ListDivider />
      <ListButtonItem
        title="ListButtonItem은 클릭할 수 있어요. 눌러보세요."
        detail="리스트 항목 전체와 우측의 Toggle Button 각각을 클릭할 수 있어요"
        onClick={() => alert("리스트 아이템 클릭됨")}
        suffix={
          <>
            <ToggleButton size="xsmall" pressed={isSubscribed} onPressedChange={setIsSubscribed}>
              <PrefixIcon svg={isSubscribed ? <IconCheckmarkFill /> : <IconPlusFill />} />
              {isSubscribed ? "모아보는 중" : "모아보기"}
            </ToggleButton>
            <Icon svg={<IconChevronRightLine />} />
          </>
        }
      />
      <ListDivider />
      <ListButtonItem
        title="ListButtonItem은 클릭할 수 있어요. 눌러보세요."
        detail="리스트 항목 전체와 우측의 커스텀 버튼 각각을 클릭할 수 있어요"
        onClick={() => alert("리스트 아이템 클릭됨")}
        suffix={
          <>
            <Box asChild bg="bg.brandSolid" color="palette.staticWhite" p="x1" borderRadius="r1_5">
              <button
                type="button"
                onClick={() => alert("커스텀 버튼 클릭됨")}
                style={{ zIndex: 1 }}
              >
                커스텀 버튼
              </button>
            </Box>
            <Icon svg={<IconChevronRightLine />} />
          </>
        }
      />
      <ListDivider />
      <ListLinkItem
        title="ListLinkItem도 클릭할 수 있어요. 눌러보세요."
        detail="리스트 항목 전체와 우측의 Action Button 각각을 클릭할 수 있어요"
        suffix={
          <>
            <ActionButton variant="neutralWeak" size="xsmall" onClick={onCopyClick}>
              <PrefixIcon svg={isCopied ? <IconCheckmarkFill /> : <IconSquare2StackedFill />} />
              {isCopied ? "복사됨" : "URL 복사"}
            </ActionButton>
            <Icon svg={<IconArrowUpRightLine />} />
          </>
        }
        href={href}
        target="_blank"
        rel="noreferrer"
      />
    </List>
  );
}

`input`s in List Items

ListSwitchItem, ListCheckItem, ListRadioItem을 사용해서 리스트 항목에 input 요소를 포함할 수 있습니다. 이때, Switchmark, Checkmark 또는 Radiomark와 같은 컨트롤 요소를 prefix나 suffix 영역에 넣어 사용합니다.

삭제하기 전에 확인

메시지 요약

핵심 내용만 빠르게 확인해보세요.

import { IconTrashcanLine } from "@karrotmarket/react-monochrome-icon";
import { IconSparkle2 } from "@karrotmarket/react-multicolor-icon";
import { Icon } from "@seed-design/react";
import { List, ListDivider, ListSwitchItem } from "seed-design/ui/list";
import { Switchmark } from "seed-design/ui/switch";

export default function ListSwitch() {
  return (
    <List width="360px">
      <ListSwitchItem
        title="삭제하기 전에 확인"
        prefix={<Icon svg={<IconTrashcanLine />} />}
        suffix={<Switchmark tone="neutral" />}
      />
      <ListDivider />
      <ListSwitchItem
        title="메시지 요약"
        detail="핵심 내용만 빠르게 확인해보세요."
        prefix={<Icon svg={<IconSparkle2 />} />}
        suffix={<Switchmark tone="neutral" />}
        defaultChecked
      />
    </List>
  );
}

알림 수신 동의권장

푸시 알림을 받으시겠습니까?

마케팅 정보 수신 동의

마케팅 정보를 받으시겠습니까?

Ghost Variant

import { Badge, HStack } from "@seed-design/react";
import { List, ListDivider, ListCheckItem } from "seed-design/ui/list";
import { Checkmark } from "seed-design/ui/checkbox";

export default function ListCheckbox() {
  return (
    <List as="fieldset" width="360px">
      <ListCheckItem
        title={
          <HStack gap="x1_5">
            <span>알림 수신 동의</span>
            <Badge variant="weak">권장</Badge>
          </HStack>
        }
        detail="푸시 알림을 받으시겠습니까?"
        suffix={<Checkmark tone="neutral" size="large" />}
        defaultChecked
      />
      <ListDivider as="div" />
      <ListCheckItem
        prefix={<Checkmark tone="neutral" size="large" />}
        title="마케팅 정보 수신 동의"
        detail="마케팅 정보를 받으시겠습니까?"
        defaultChecked
      />
      <ListDivider as="div" />
      <ListCheckItem
        prefix={<Checkmark tone="neutral" size="large" variant="ghost" />}
        title="Ghost Variant"
      />
    </List>
  );
}

옵션 1

첫 번째 선택지

옵션 2

두 번째 선택지

옵션 3

세 번째 선택지

import { RadioGroup } from "@seed-design/react/primitive";
import { List, ListDivider, ListRadioItem } from "seed-design/ui/list";
import { Radiomark } from "seed-design/ui/radio-group";

export default function ListRadio() {
  return (
    <List width="360px" asChild>
      <RadioGroup.Root defaultValue="option1" aria-label="옵션 선택">
        <ListRadioItem
          value="option1"
          title="옵션 1"
          detail="첫 번째 선택지"
          suffix={<Radiomark tone="neutral" size="large" />}
        />
        <ListDivider as="div" />
        <ListRadioItem
          prefix={<Radiomark tone="neutral" size="large" />}
          value="option2"
          title="옵션 2"
          detail="두 번째 선택지"
        />
        <ListDivider as="div" />
        <ListRadioItem
          prefix={<Radiomark tone="neutral" size="large" />}
          value="option3"
          title="옵션 3"
          detail="세 번째 선택지"
        />
      </RadioGroup.Root>
    </List>
  );
}

Accessibility

List는 기본적으로 <ul>입니다. ListCheckItem와 ListRadioItem를 사용하는 경우 List에 적절한 role을 부여해야 합니다.

<List as="fieldset">
  <ListCheckItem
    suffix={<Checkmark size="large" />}
    title="알림 수신 동의"
    detail="푸시 알림을 받으시겠습니까?"
  />
  <ListCheckItem
    suffix={<Checkmark size="large" />}
    title="마케팅 정보 수신 동의"
    detail="마케팅 정보를 받으시겠습니까?"
  />
</List>

<List asChild>
  <RadioGroup.Root defaultValue="짜장" aria-label="점심 메뉴"> {/* <div role="radiogroup"> */}
    <ListRadioItem
      suffix={<Radiomark size="large" />}
      value="짜장"
      title="짜장"
    />
    <ListRadioItem
      suffix={<Radiomark size="large" />}
      value="짬뽕"
      title="짬뽕"
    />
  </RadioGroup.Root>
</List>

Disabled

활성화된 ListCheckItem

활성화된 ListRadioItem

비활성화된 ListCheckItem

비활성화된 ListRadioItem

import {
  IconChevronRightLine,
  IconPersonCircleLine,
  IconSlashCircleLine,
} from "@karrotmarket/react-monochrome-icon";
import { Divider, Icon, VStack } from "@seed-design/react";
import { RadioGroup } from "@seed-design/react/primitive";
import { List, ListButtonItem, ListCheckItem, ListRadioItem } from "seed-design/ui/list";
import { Checkmark } from "seed-design/ui/checkbox";
import { Radiomark } from "seed-design/ui/radio-group";

export default function ListDisabled() {
  return (
    <VStack width="360px">
      <List>
        <ListButtonItem
          prefix={<Icon svg={<IconPersonCircleLine />} />}
          title="활성화된 ListButtonItem"
          detail="Cupidatat et pariatur amet."
          suffix={<Icon svg={<IconChevronRightLine />} />}
        />
      </List>
      <List as="fieldset">
        <ListCheckItem
          prefix={<Icon svg={<IconPersonCircleLine />} />}
          title="활성화된 ListCheckItem"
          suffix={<Checkmark tone="neutral" size="large" />}
        />
      </List>
      <List asChild>
        <RadioGroup.Root defaultValue="foo" aria-label="옵션 선택">
          <ListRadioItem
            prefix={<Icon svg={<IconPersonCircleLine />} />}
            title="활성화된 ListRadioItem"
            suffix={<Radiomark tone="neutral" size="large" />}
            value="foo"
          />
        </RadioGroup.Root>
      </List>
      <Divider />
      <List>
        <ListButtonItem
          disabled
          prefix={<Icon svg={<IconSlashCircleLine />} />}
          title="비활성화된 ListButtonItem"
          detail="Cupidatat et pariatur amet."
          suffix={<Icon svg={<IconChevronRightLine />} />}
        />
      </List>
      <List as="fieldset">
        <ListCheckItem
          disabled
          prefix={<Icon svg={<IconSlashCircleLine />} />}
          title="비활성화된 ListCheckItem"
          suffix={<Checkmark tone="neutral" size="large" />}
        />
      </List>
      <List asChild>
        <RadioGroup.Root defaultValue="foo" aria-label="옵션 선택">
          <ListRadioItem
            disabled
            prefix={<Icon svg={<IconSlashCircleLine />} />}
            title="비활성화된 ListRadioItem"
            suffix={<Radiomark tone="neutral" size="large" />}
            value="foo"
          />
        </RadioGroup.Root>
      </List>
    </VStack>
  );
}

Variants

Highlighted

하이라이트

highlight

import { IconPersonCircleLine } from "@karrotmarket/react-monochrome-icon";
import { Box, Icon, VStack } from "@seed-design/react";
import { useState } from "react";
import { List, ListDivider, ListItem, ListButtonItem } from "seed-design/ui/list";
import { Switch } from "seed-design/ui/switch";

export default function ListHighlighted() {
  const [highlighted, setHighlighted] = useState(true);

  return (
    <VStack width="360px" gap="x4">
      <List>
        <ListButtonItem
          prefix={<Icon svg={<IconPersonCircleLine />} />}
          title="버튼"
          detail="Enim aute duis magna mollit aute sit aliquip duis ut tempor sunt."
          onClick={() => {}}
        />
        <ListDivider />
        <ListButtonItem
          highlighted
          prefix={<Icon svg={<IconPersonCircleLine />} />}
          title="하이라이트된 버튼"
          detail="Enim aute duis magna mollit aute sit aliquip duis ut tempor sunt."
          onClick={() => {}}
        />
        <ListDivider />
        <ListButtonItem
          highlighted
          disabled
          prefix={<Icon svg={<IconPersonCircleLine />} />}
          title="하이라이트 및 비활성화된 버튼"
          detail="Enim aute duis magna mollit aute sit aliquip duis ut tempor sunt."
          onClick={() => {}}
        />
      </List>
      <List>
        <ListItem
          prefix={<Icon svg={<IconPersonCircleLine />} />}
          title="하이라이트"
          highlighted={highlighted}
        />
      </List>
      <Box alignSelf="center">
        <Switch
          size="24"
          tone="neutral"
          label="highlight"
          checked={highlighted}
          onCheckedChange={setHighlighted}
        />
      </Box>
    </VStack>
  );
}

With Bottom Sheet

import {
  BottomSheetBody,
  BottomSheetContent,
  BottomSheetFooter,
  BottomSheetRoot,
  BottomSheetTrigger,
} from "seed-design/ui/bottom-sheet";
import { ActionButton } from "seed-design/ui/action-button";
import { Checkmark } from "seed-design/ui/checkbox";
import { List, ListCheckItem } from "seed-design/ui/list";
import { PrefixIcon, VStack } from "@seed-design/react";
import { useState } from "react";
import { IconArrowClockwiseCircularFill } from "@karrotmarket/react-monochrome-icon";

const TYPES = ["버스", "지하철", "택시", "자전거", "도보"] as const;

export default function ListBottomSheet() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedTypes, setSelectedTypes] = useState<(typeof TYPES)[number][]>([]);

  return (
    <BottomSheetRoot open={isOpen} onOpenChange={setIsOpen}>
      <BottomSheetTrigger asChild>
        <ActionButton variant="neutralSolid">BottomSheet 열기</ActionButton>
      </BottomSheetTrigger>
      <BottomSheetContent title="교통수단" description="이동할 교통수단을 선택해주세요.">
        <VStack asChild>
          <form
            onReset={(e) => {
              e.preventDefault();
              setSelectedTypes([]);
            }}
            onSubmit={(e) => {
              e.preventDefault();
              setIsOpen(false);
            }}
          >
            <BottomSheetBody paddingX="0" asChild>
              <List as="fieldset">
                {TYPES.map((type) => (
                  <ListCheckItem
                    key={type}
                    title={type}
                    checked={selectedTypes.includes(type)}
                    prefix={<Checkmark tone="neutral" size="large" />}
                    onCheckedChange={() => {
                      setSelectedTypes((prev) =>
                        prev.includes(type) ? prev.filter((t) => t !== type) : [...prev, type],
                      );
                    }}
                  />
                ))}
              </List>
            </BottomSheetBody>
            <BottomSheetFooter>
              <VStack gap="x2">
                <ActionButton
                  size="large"
                  variant="neutralSolid"
                  disabled={selectedTypes.length === 0}
                  type="submit"
                >
                  경로 찾기
                </ActionButton>
                <ActionButton
                  size="small"
                  variant="ghost"
                  disabled={selectedTypes.length === 0}
                  type="reset"
                >
                  <PrefixIcon svg={<IconArrowClockwiseCircularFill />} />
                  초기화
                </ActionButton>
              </VStack>
            </BottomSheetFooter>
          </form>
        </VStack>
      </BottomSheetContent>
    </BottomSheetRoot>
  );
}

Alignment

alignItems prop으로 prefix와 suffix의 정렬 방식을 조정할 수 있습니다.

Prefix에 Avatar 넣기. Veniam elit velit esse ea incididunt sunt sit aute.
Et proident sit ullamco ut voluptate. Voluptate eiusmod occaecat adipisicing quis qui esse.

Prefix에 Avatar 넣고 상단으로 정렬하기. Veniam elit velit esse ea incididunt sunt sit aute.
일반적으로 `title`이 길어질 때 `alignItems`를 `flex-start`로 설정합니다.

import { List, ListItem } from "seed-design/ui/list";
import { HStack } from "@seed-design/react";
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
import { Avatar } from "seed-design/ui/avatar";

export default function ListAlignment() {
  return (
    <HStack width="full" align="flex-start" gap="x4">
      <List>
        <ListItem
          prefix={<Avatar size="48" fallback={<IdentityPlaceholder />} />}
          title="Prefix에 Avatar 넣기. Veniam elit velit esse ea incididunt sunt sit aute."
          detail="Et proident sit ullamco ut voluptate. Voluptate eiusmod occaecat adipisicing quis qui esse."
        />
      </List>
      <List>
        <ListItem
          alignItems="flex-start"
          prefix={<Avatar size="48" fallback={<IdentityPlaceholder />} />}
          title="Prefix에 Avatar 넣고 상단으로 정렬하기. Veniam elit velit esse ea incididunt sunt sit aute."
          detail="일반적으로 `title`이 길어질 때 `alignItems`를 `flex-start`로 설정합니다."
        />
      </List>
    </HStack>
  );
}

Border Radius

List에 itemBorderRadius prop을 설정하여 active 상태에서 적용되는 리스트 항목의 radius를 조정할 수 있습니다. 리스트가 카드 등 모서리가 둥근 컨테이너 안에 포함되는 경우 유용합니다.

카드 borderRadius: r3_5

borderRadius: r2

카드 borderRadius: 22px

borderRadius: r3

import { List, ListCheckItem, ListRadioItem } from "seed-design/ui/list";
import { ListHeader } from "seed-design/ui/list-header";
import { Checkmark } from "seed-design/ui/checkbox";
import { Radiomark } from "seed-design/ui/radio-group";
import { HStack, VStack } from "@seed-design/react";
import { RadioGroup } from "@seed-design/react/primitive";

export default function ListBorderRadius() {
  return (
    <HStack
      gap="x4"
      bg="bg.layerBasement"
      width="full"
      grow
      wrap
      align="center"
      justify="center"
      p="x4"
    >
      <VStack
        width="300px"
        py="x1_5"
        borderRadius="r3_5"
        bg="bg.layerDefault"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
      >
        <ListHeader as="h2">카드 borderRadius: r3_5</ListHeader>
        <List as="fieldset" itemBorderRadius="r2">
          <ListCheckItem
            defaultChecked
            title="borderRadius: r2"
            suffix={<Checkmark size="large" tone="neutral" />}
          />
          <ListCheckItem
            title="borderRadius: r2"
            suffix={<Checkmark size="large" tone="neutral" />}
          />
        </List>
      </VStack>
      <VStack
        width="300px"
        px="x1"
        py="x2_5"
        borderRadius="22px"
        bg="bg.layerDefault"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
      >
        <ListHeader as="h2">카드 borderRadius: 22px</ListHeader>
        <List asChild itemBorderRadius="r3">
          <RadioGroup.Root defaultValue="0" aria-label="Border radius options">
            <ListRadioItem
              value="0"
              title="borderRadius: r3"
              suffix={<Radiomark size="large" tone="neutral" />}
            />
            <ListRadioItem
              value="1"
              title="borderRadius: r3"
              suffix={<Radiomark size="large" tone="neutral" />}
            />
          </RadioGroup.Root>
        </List>
      </VStack>
    </HStack>
  );
}

Customization and Composition

Usage

@seed-design/react 패키지에서 제공하는 List와 ListHeader 컴포넌트는 다음과 같은 구조로 사용됩니다.

ListHeader
List.Root
└── List.Item
    ├── List.Prefix (선택사항)
    ├── List.Content
    │   ├── List.Title
    │   └── List.Detail (선택사항)
    └── List.Suffix (선택사항)
└── List.Item
    ├── ...

import { ListHeader, List, Icon } from "@seed-design/react";

<ListHeader>
  내 정보
</ListHeader>
<List.Root>
  <List.Item>
    <List.Prefix>
      <Icon svg={<IconPersonCircleLine />} />
    </List.Prefix>
    <List.Content>
      <List.Title>내 프로필</List.Title>
      <List.Detail>다른 사람들에게 보이는 내 정보를 관리합니다.</List.Detail>
    </List.Content>
    <List.Suffix>
      <Icon svg={<IconArrowRightLine />} />
    </List.Suffix>
  </List.Item>
  <List.Item>
    {/* ... */}
  </List.Item>
</List.Root>

ListHeader: 리스트의 제목이나 설명을 표시하는 헤더 역할
List.Root: 모든 리스트 항목을 감싸는 컨테이너 역할
- List.Item: 개별 리스트 항목. 클릭 가능한 영역을 정의
- List.Prefix: 아이콘, Avatar, Checkmark 등을 표시할 수 있는 시작 영역
- List.Content: 주요 콘텐츠가 들어가는 중앙 영역
  - List.Title: 리스트 항목의 제목
  - List.Detail: 부가 설명이나 세부 정보
- List.Suffix: 아이콘, Action Button, Toggle Button 등을 표시할 수 있는 끝 영역

`asChild` prop으로 적절한 시맨틱 요소와 조합하기

Composition

asChild prop에 대해 자세히 알아봅니다.

Using `asChild` prop in `List.Content`

리스트 항목 전체 영역을 클릭 가능한 버튼으로 만드는 경우 활용할 수 있는 패턴입니다. 이 경우 List.Item에 asChild prop을 사용하지 않도록 유의하세요. List.Prefix 또는 List.Suffix에 버튼을 넣는 경우 button이 중첩되는 등 유효하지 않은 HTML이 생성됩니다.

import { List as SeedList } from "@seed-design/react";

<SeedList.Item>
  <SeedList.Content asChild>
    <button type="button" onClick={() => alert("사용자 클릭됨")}>
      <SeedList.Title>사용자</SeedList.Title>
    </button>
  </SeedList.Content>
  <SeedList.Suffix>
    <ActionButton
      size="xsmall"
      variant="brandSolid"
      onClick={() => alert("보기 클릭됨")}
    >
      보기
    </ActionButton>
  </SeedList.Suffix>
</SeedList.Item>

Snippet으로 제공되는 ListButtonItem 및 ListLinkItem는 이 패턴을 쉽게 구현할 수 있도록 돕습니다.

import { ListButtonItem } from "seed-design/ui/list";

<ListButtonItem
  onClick={() => alert("사용자 클릭됨")}
  title="사용자"
  detail="항목 6개"
  suffix={
    <ActionButton
      size="xsmall"
      variant="brandSolid"
      onClick={() => alert("보기 클릭됨")}
    >
      보기
    </ActionButton>
  }
/>

Using `asChild` prop in `List.Item`

리스트 항목 전체 영역을 label로 만들고, List.Prefix 또는 List.Suffix에 Switchmark, Checkmark 또는 Radiomark를 넣는 경우 활용할 수 있는 패턴입니다.

import { List as SeedList } from "@seed-design/react";
import { Checkbox } from "@seed-design/react/primitive";

<SeedList.Item asChild> {/* <label> */}
  <Checkbox.Root defaultChecked>
    <SeedList.Content>
      <SeedList.Title>동의</SeedList.Title>
    </SeedList.Content>
    <SeedList.Suffix>
      <Checkmark />
    </SeedList.Suffix>
    <Checkbox.HiddenInput />
  </Checkbox.Root>
</SeedList.Item>

Snippet으로 제공되는 ListSwitchItem, ListCheckItem 및 ListRadioItem는 이 패턴을 쉽게 구현할 수 있도록 돕습니다.

import { ListCheckItem } from "seed-design/ui/list";

<ListCheckItem
  defaultChecked
  title="동의"
  suffix={<Checkmark size="large" />}
/>

List

리스트 헤더

Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

Usage

Props

`ListHeader`

`List`

List Items

Examples

Using `ListHeader`

variant="mediumWeak"

variant="boldSolid"

List Header with Action Button

Affixes (Prefix/Suffix)

Clickable List Items

`input`s in List Items

Accessibility

Disabled

Variants

Highlighted

With Bottom Sheet

Alignment

Border Radius

카드 borderRadius: r3_5

카드 borderRadius: 22px

Customization and Composition

Usage

`asChild` prop으로 적절한 시맨틱 요소와 조합하기

Composition

Using `asChild` prop in `List.Content`

Using `asChild` prop in `List.Item`

On this page

리스트 헤더

variant="mediumWeak"

variant="boldSolid"

List Header with Action Button

카드 borderRadius: r3_5

카드 borderRadius: 22px

List

리스트 헤더

Manual Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

ListItem

ListButtonItem

ListLinkItem

ListSwitchItem

ListCheckItem

ListRadioItem

ListDivider

variant="mediumWeak"

variant="boldSolid"

List Header with Action Button

카드 borderRadius: r3_5

카드 borderRadius: 22px

Composition

On this page

리스트 헤더

variant="mediumWeak"

variant="boldSolid"

List Header with Action Button

카드 borderRadius: r3_5

카드 borderRadius: 22px