CoreSelectItem

레거시 CoreSelect의 아이템 서브 컴포넌트. 항상 CoreSelect 내부에서 사용합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Select.Item을 사용하세요.

CoreSelectItem은 CoreSelect의 드롭다운 목록을 구성하는 아이템 컴포넌트입니다. 반드시 CoreSelect 내부에서 사용해야 하며, 단독으로는 동작하지 않습니다.

단일·다중 선택 겸용 — CoreCheckbox를 children으로 넣으면 다중 선택, CoreRadio나 텍스트를 넣으면 단일 선택으로 동작
displayValue 분리 — Trigger에 표시할 값과 드롭다운 내 표시를 다르게 설정할 수 있음
선택 상태 자동 주입 — CoreSelect가 selectedItems / setSelectedItems / setIsActive를 내부적으로 주입하므로 소비자는 직접 전달하지 않아도 됨

Usage

기본 사용법

<CoreSelect>
<CoreSelect.Item value="option-1">옵션 1</CoreSelect.Item>
<CoreSelect.Item value="option-2">옵션 2</CoreSelect.Item>
<CoreSelect.Item value="option-3">옵션 3</CoreSelect.Item>
</CoreSelect>

displayValue 설정

드롭다운의 내용과 Trigger에 표시되는 텍스트를 다르게 하려면 displayValue를 사용합니다.

<CoreSelect>
<CoreSelect.Item value="option-1" displayValue="표시될 값">
  실제 드롭다운 내용
</CoreSelect.Item>
<CoreSelect.Item value="option-2" displayValue="Option 2">
  다른 내용
</CoreSelect.Item>
</CoreSelect>

Checkbox와 함께 사용 (다중 선택)

children에 CoreCheckbox를 넣으면 체크박스 기반 다중 선택이 됩니다.

<CoreSelect>
<CoreSelect.Item value="check-1">
  <CoreCheckbox label="옵션 1" />
</CoreSelect.Item>
<CoreSelect.Item value="check-2">
  <CoreCheckbox label="옵션 2" />
</CoreSelect.Item>
</CoreSelect>

Radio와 함께 사용 (단일 선택)

<CoreSelect>
<CoreSelect.Item value="radio-1">
  <CoreRadio label="옵션 1" name="radio" />
</CoreSelect.Item>
<CoreSelect.Item value="radio-2">
  <CoreRadio label="옵션 2" name="radio" />
</CoreSelect.Item>
</CoreSelect>

아이콘과 함께 사용

<CoreSelect>
<CoreSelect.Item value="icon-1">
  <IconCalendarOutline />
  Option 1
</CoreSelect.Item>
<CoreSelect.Item value="icon-2">
  <IconCalendarOutline />
  Option 2
</CoreSelect.Item>
</CoreSelect>

비활성화

<CoreSelect>
<CoreSelect.Item value="option-1">옵션 1</CoreSelect.Item>
<CoreSelect.Item value="option-2" disabled>옵션 2 (비활성화)</CoreSelect.Item>
<CoreSelect.Item value="option-3">옵션 3</CoreSelect.Item>
</CoreSelect>

기본 선택

<CoreSelect>
<CoreSelect.Item value="option-1" defaultChecked>옵션 1 (기본 선택)</CoreSelect.Item>
<CoreSelect.Item value="option-2">옵션 2</CoreSelect.Item>
</CoreSelect>

Props

ComponentPropsWithoutRef<'div'>를 확장한 컴포넌트입니다.

Prop

Type

CoreSelectedItem

Prop

Type

스타일

CoreSelect의 드롭다운 아이템 스타일을 따릅니다.

display: flex, gap: spacing-150 (6px), border-radius: radius-100, min-height: 28px

Size Variants

size	typography	padding-y
`sm`	`body[1]`	`spacing-50` (2px)
`md`	`body[2]`	`spacing-100` (4px)
`lg`	`body[2]`	`spacing-200` (8px)

상태

Hover (활성): background-color: primary[10], color: primary[100], cursor: pointer
Hover (비활성): cursor: not-allowed

On this page