Select

정해진 옵션 중 하나를 고르는 컴포넌트예요. 누르면 Context & Menu Item 목록이 열려요.

Anatomy

01
Container
트리거 영역. 상태에 따라 테두리 색이 바뀌어요
02
Placeholder / Value
선택 전엔 Placeholder, 후엔 선택한 값
03
Chevron Icon
닫히면 아래, 열리면 위

Properties

State

상태에 따라 테두리 색이 바뀌어요. Disabled 는 텍스트·아이콘만 40% 로 흐려지고 배경·radius 는 그대로예요.

Select 상태별 실물과 테두리
State	Preview	Border	설명
Default		`--color-line-neutral` `#e8ebed`	닫힘, 미선택
Open	—	`--color-accent-normal` `#1d7ff9`	메뉴 노출 중, chevron 위 방향
Filled		`--color-line-neutral` `#e8ebed`	값 선택 완료, 닫힘
Disabled		`--color-line-neutral` `#e8ebed`	배경·radius 는 그대로, 텍스트·아이콘만 40%

Size

LG 는 폼, MD 는 필터·검색바, SM 은 툴바·인라인처럼 가장 좁은 곳에 써요.

Select 사이즈별 치수
	LG	MD	SM
Preview
height	`52px`	`38px`	`26px`
padding	`0 8px 0 12px`	`0 8px 0 12px`	`0 8px 0 4px`
font-size	`14px`	`13px`	`13px`
border-radius	`8px`	`8px`	`6px`
chevron	`24×24px`	`18×18px`	`14×14px`

Guidelines

✓ DO

옵션 5개 이상일 때
선택한 값은 trigger 에 표시
메뉴는 Context & Menu Item 사용
메뉴 너비는 trigger 와 같게

✗ DON'T

옵션 2~4개(Segment Control 몫)
메뉴 안에 복잡한 UI
이유 안내 없는 Disabled

Specification

Container

Select 트리거 스펙
속성	값	설명
height (lg)	`52px`
height (md)	`38px`
padding (lg)	`0 8px 0 12px`	left 12px / right 8px
padding (md)	`0 8px 0 12px`	left 12px / right 8px
padding (sm)	`0 8px 0 4px`	left 4px / right 8px
border-radius (lg)	`8px`
border-radius (md)	`8px`
border-radius (sm)	`6px`
border (default)	`1px solid --color-line-neutral (#e8ebed)`
border (open)	`1px solid --color-accent-normal (#1d7ff9)`
background	`--color-background-base (#ffffff)`
placeholder color	`--color-label-assistive (#9ea4aa)`
value color	`--color-label-normal (#26282b)`
font-size (lg)	`14px (font-size/sm)`
font-size (md/sm)	`13px (font-size/xs)`
chevron (lg)	`24×24px`	Open 시 위 방향
chevron (md)	`18×18px`
chevron (sm)	`14×14px`
disabled opacity (text/icon)	`40%`	배경·border-radius는 Default와 동일

메뉴 목록과 항목은 Context & Menu Item 스펙을 그대로 써요.

Select 메뉴 스펙
속성	값	설명
offset (trigger 기준)	`4px`	trigger 하단에서 4px 간격
width	`trigger 동일`
border-radius	`8px`
box-shadow	`0 2px 6px rgba(0,0,0,0.06)`	shadow/shadow-md
내부 아이템	`→ Context & Menu Item 스펙 참조`

설치

npm i @polarisoffice/pds-react

Base

옵션 5개 이상일 때 써요. 2~4개면 Segment Control 이 나아요.

import { Select } from '@polarisoffice/pds-react';

const options = [
  { value: '1', label: '옵션 1' },
  { value: '2', label: '옵션 2' },
  { value: '3', label: '옵션 3' },
];

<Select options={options} placeholder="Placeholder" />

Size

LG(폼) · MD(필터·검색바) · SM(툴바·인라인).

import { Select } from '@polarisoffice/pds-react';

<Select size="lg" options={options} placeholder="Placeholder" />
<Select size="md" options={options} placeholder="Placeholder" />
<Select size="sm" options={options} placeholder="Placeholder" />

State

Disabled 는 텍스트·아이콘만 40% 로 흐려지고 배경·radius 는 그대로예요.

import { Select } from '@polarisoffice/pds-react';

<Select options={options} value="1" />
<Select options={options} placeholder="Placeholder" disabled />

Controlled

선택된 값은 trigger 텍스트에 반영돼요.

import { Select } from '@polarisoffice/pds-react';
import { useState } from 'react';

const [value, setValue] = useState('');

<Select options={options} value={value} onChange={setValue} placeholder="Placeholder" />