CoreSelect

레거시 셀렉트 컴포넌트. Select로 마이그레이션을 권장합니다.

개요

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

CoreSelect는 label, helper text, validation 상태를 내장한 단일 컴포넌트 기반 드롭다운 셀렉트입니다.

3가지 size — sm, md, lg
3가지 status — none, warning, error
CoreSelect.Item — 자식 컴포넌트로 옵션 구성
leadingElement / secondaryLabel — 입력 영역 앞뒤 커스텀 요소
다중 선택 — 체크박스 Item 조합으로 구현
dropdownZIndex — 드롭다운 레이어 순서 제어

Usage

기본 사용법

<CoreSelect size="lg" width="240px">
<CoreSelect.Item value="1">옵션 1</CoreSelect.Item>
<CoreSelect.Item value="2">옵션 2</CoreSelect.Item>
<CoreSelect.Item value="3">옵션 3</CoreSelect.Item>
</CoreSelect>

Label과 Helper Text

<VStack $css={{ gap: '16px' }}>
<CoreSelect label="카테고리" size="lg" width="240px">
  <CoreSelect.Item value="1">옵션 1</CoreSelect.Item>
  <CoreSelect.Item value="2">옵션 2</CoreSelect.Item>
</CoreSelect>
<CoreSelect label="카테고리" size="lg" width="240px" helperText="항목을 선택하세요">
  <CoreSelect.Item value="1">옵션 1</CoreSelect.Item>
  <CoreSelect.Item value="2">옵션 2</CoreSelect.Item>
</CoreSelect>
</VStack>

Status와 Validation Text

<VStack $css={{ gap: '16px' }}>
<CoreSelect size="lg" width="240px" status="warning" validationText="선택을 확인하세요">
  <CoreSelect.Item value="1">옵션 1</CoreSelect.Item>
  <CoreSelect.Item value="2">옵션 2</CoreSelect.Item>
</CoreSelect>
<CoreSelect size="lg" width="240px" status="error" validationText="필수 항목입니다">
  <CoreSelect.Item value="1">옵션 1</CoreSelect.Item>
  <CoreSelect.Item value="2">옵션 2</CoreSelect.Item>
</CoreSelect>
</VStack>

Leading Element

<CoreSelect size="lg" width="240px" leadingElement={<IconSearchOutline />}>
<CoreSelect.Item value="1">옵션 1</CoreSelect.Item>
<CoreSelect.Item value="2">옵션 2</CoreSelect.Item>
</CoreSelect>

비활성화 및 읽기 전용

<VStack $css={{ gap: '16px' }}>
<CoreSelect label="비활성" size="lg" width="240px" disabled>
  <CoreSelect.Item value="1">옵션 1</CoreSelect.Item>
</CoreSelect>
<CoreSelect label="읽기 전용" size="lg" width="240px" readOnly>
  <CoreSelect.Item value="1">옵션 1</CoreSelect.Item>
</CoreSelect>
</VStack>

Checkbox 다중 선택

<CoreSelect size="lg" width="240px">
<CoreSelect.Item value="react">
  <CoreCheckbox label="React" />
</CoreSelect.Item>
<CoreSelect.Item value="vue">
  <CoreCheckbox label="Vue" />
</CoreSelect.Item>
<CoreSelect.Item value="svelte">
  <CoreCheckbox label="Svelte" />
</CoreSelect.Item>
</CoreSelect>

Props

ComponentPropsWithoutRef<'input'>을 확장한 컴포넌트입니다.

Prop

Type

CoreSelectSize

Prop

Type

CoreSelectStatus

Prop

Type

스타일

Size Variants — 트리거 컨테이너

Size	Min Height	Typography
`sm`	`28px`	`body[1]`
`md`	`32px`	`body[2]`
`lg`	`40px`	`body[2]`

Status — 테두리 색상

Status	Border Color
`none`	`border[1]` (포커스 시 `primary[50]`)
`warning`	`support-warning[3]`
`error`	`support-error[3]`

States — 상태별 토큰

상태	배경색	커서
Default	`background-1`	`pointer`
Hover	`background-2`	`pointer`
Readonly	`background[4]`	`auto`
Disabled	`background[4]`	`not-allowed`

마이그레이션 가이드

Select는 Dropdown visual layer와 분리된 Compound composition 구조입니다.

Before / After

// Before (CoreSelect)
<CoreSelect
  label="카테고리"
  size="lg"
  width="240px"
  status="error"
  validationText="필수 항목입니다"
  setValue={setValue}
>
  <CoreSelect.Item value="1">옵션 1</CoreSelect.Item>
  <CoreSelect.Item value="2">옵션 2</CoreSelect.Item>
</CoreSelect>

// After (Select)
<Select.Root value={value} onValueChange={setValue}>
  <Select.Trigger size="lg" style={{ width: 240 }}>
    <Select.Value placeholder="선택하세요" />
  </Select.Trigger>
  <Select.Popup>
    <Select.Item value="1">옵션 1</Select.Item>
    <Select.Item value="2">옵션 2</Select.Item>
  </Select.Popup>
</Select.Root>

라벨과 유효성 메시지는 Field 컴포넌트와 조합해서 사용하세요.

변경 사항

CoreSelect	Select + Field
`label` prop	`Field.Label`
`status` + `validationText`	`Field.Message` (status에 따라 error/warning 색상 자동 적용)
`helperText`	`Field.HelperText`
`setValue`	`Select.Root`의 `onValueChange`
`CoreSelect.Item`	`Select.Item`
`optionHeight` / `optionWidth`	`Select.Popup`의 `style`

On this page