DataList

상세 패널이나 레코드 요약, 제목 아래의 메타데이터처럼 항목과 그 이름을 나열합니다. 진짜 <dt>/<dd> 쌍이라 각 행이 "라벨, 값"으로 읽힙니다.

import { DataList, DataListItem } from 'neba';

<DataList>
  <DataListItem label="Status">Live</DataListItem>
  <DataListItem label="Region">Frankfurt</DataListItem>
</DataList>;

Props

Prop	타입	기본값	설명
orientation공통	'horizontal' | 'vertical'	'horizontal'	라벨이 놓이는 자리. horizontal은 값 옆의 열, vertical은 값 위입니다
labelWidth	number | string	—	horizontal일 때 라벨 열의 너비. 숫자는 px입니다. 지정하지 않으면 가장 긴 라벨만큼입니다
dividers	boolean	false	행 사이에 하이라인을 그립니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	라벨과 값의 타입 스케일
density공통	'default' | 'compact'	'default'	행과 열 사이의 간격만 바꿉니다
children	ReactNode	—	DataListItem들

<dl>의 모든 속성이 color를 제외하고 그대로 전달됩니다. 표면은 그리지 않습니다. 필요하면 Card나 Box 안에 두세요.

두 열짜리 Table이 아닙니다. 표는 같은 모양의 행이 격자로 놓인 것이고 격자로 읽힙니다. 이쪽은 쌍의 모음이고 각 쌍이 라벨과 값으로 읽힙니다.

DataListItem

Prop	타입	기본값	설명
label *	ReactNode	—	값의 이름. dt로 렌더링됩니다
children	ReactNode	—	값. 노드이므로 Chip이나 링크, 코드 조각도 들어갑니다. dd로 렌더링됩니다

예시

orientation

horizontal은 값 옆에 라벨만의 열을 두며, 상세 패널이 취하는 모양입니다. vertical은 라벨을 위에 둡니다. 폭이 좁은 열이나, 값이 길어서 옆에 라벨을 두면 행 대부분이 비는 경우에 씁니다.

import { Box, DataList, DataListItem } from 'neba';

export default function DataListOrientation() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
      {(['horizontal', 'vertical'] as const).map((orientation) => (
        <Box key={orientation} variant="outline">
          <DataList orientation={orientation}>
            <DataListItem label="Plan">Team</DataListItem>
            <DataListItem label="Seats">12 of 20</DataListItem>
            <DataListItem label="Renews">1 April 2026</DataListItem>
          </DataList>
        </Box>
      ))}
    </div>
  );
}

labelWidth

지정하지 않으면 라벨 열은 가장 긴 라벨만큼 넓어지며, 그래서 모든 값이 같은 위치에서 시작합니다. 두 목록을 나란히 같은 치수로 맞출 때 지정하세요.

import { Box, DataList, DataListItem } from 'neba';

export default function DataListLabelWidth() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Box variant="outline">
        <DataList>
          <DataListItem label="Id">8f2c1a</DataListItem>
          <DataListItem label="Environment">Production</DataListItem>
        </DataList>
      </Box>
      <Box variant="outline">
        <DataList labelWidth={140}>
          <DataListItem label="Id">8f2c1a</DataListItem>
          <DataListItem label="Environment">Production</DataListItem>
        </DataList>
      </Box>
    </div>
  );
}

dividers

행 사이의 하이라인입니다. 쌍이 많아 구분이 필요한 긴 목록에 씁니다.

import { Box, DataList, DataListItem } from 'neba';

export default function DataListDividers() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
      {[false, true].map((dividers) => (
        <Box key={String(dividers)} variant="outline">
          <DataList dividers={dividers} density="compact" size="sm">
            <DataListItem label="Runtime">Node 26</DataListItem>
            <DataListItem label="Framework">Next.js 16</DataListItem>
            <DataListItem label="Bundle">215.3 kB</DataListItem>
          </DataList>
        </Box>
      ))}
    </div>
  );
}

접근성

• 각 쌍이 <dt>와 <dd>인 진짜 <dl>로 렌더링되므로, ARIA 없이도 라벨과 값이 연결됩니다.
• 값에는 Chip, TextLink, Avatar를 비롯한 어떤 노드든 올 수 있고, 각자 가져온 의미를 그대로 유지합니다.