이로울 | 포트폴리오

Button Input Textarea Checkbox Radio Badge Select Toast Alert Modal Feedback RichTextEditor SideListMenu Pagination Calendar ApiHealthBadge TechBadge ButtonLink Icons AppSwiper

Select

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

Select

기본 HTML <select> 대신, Input과 동일한 크기/스타일을 가진 div 기반 Select 컴포넌트입니다.
최대 노출 옵션 개수, 위/아래 방향 자동 결정, 비활성 옵션, 에러/헬퍼 텍스트 등을 지원합니다.

기본 Select

placeholder와 옵션을 가진 가장 기본적인 Select 예시

Source Code

          const [value, setValue] = useState<string | undefined>();

          <Select
            label="언어 선택"
            placeholder="언어를 선택하세요"
            value={value}
            onChange={setValue}
            options={languageOptions}
          />

언어 선택

아직 선택되지 않았습니다.

Live Preview

사이즈 변경

Input 높이와 동일한 sm / md / lg 사이즈를 제공합니다.

Small

<Select size="sm" ... />

Small

Live Preview

Medium

<Select size="md" ... />

Medium

Live Preview

Large

<Select size="lg" ... />

Large

Live Preview

최대 표시 개수 + 스크롤

maxVisibleOptions로 노출되는 옵션 개수를 제한하고, 초과분은 스크롤로 표시합니다.

Source Code

          <Select
            maxVisibleOptions={4}
            options={languageOptions}
          />

언어 (최대 4개 표시)

Live Preview

상태 선택 (에러 / 헬퍼 텍스트)

에러 메시지와 헬퍼 텍스트를 사용하는 예시

Source Code

          <Select
            label="상태"
            value={statusValue}
            onChange={setStatusValue}
            options={statusOptions}
            error={statusValue === 'archived' ? '보관 상태는 선택할 수 없습니다.' : undefined}
          />

상태

프로젝트의 현재 상태를 선택하세요.

Live Preview

옵션을 팝업으로 사용 (usePopup) — 두 가지 방식

usePopup={true}일 때 popupPlacement로 표시 방식을 구분할 수 있습니다. 'anchor'는 트리거 버튼 옆에 드롭다운처럼 붙어서 열리고, 'center'는 화면 중앙에 모달처럼 열립니다.

Source Code

          const [value, setValue] = useState<string | undefined>();

          // 앵커형: 트리거 옆에 붙어서 표시 (기본값)
          <Select
            label="앵커형 팝업"
            placeholder="클릭하여 선택"
            value={value}
            onChange={setValue}
            options={options}
            usePopup
            popupPlacement="anchor"
            popupTitle="선택 (트리거 옆)"
          />

          // 중앙형: 화면 중앙에 모달처럼 표시
          <Select
            label="중앙형 팝업"
            placeholder="클릭하여 선택"
            value={value}
            onChange={setValue}
            options={options}
            usePopup
            popupPlacement="center"
            popupTitle="옵션을 선택하세요"
          />

앵커형 (anchor) — 트리거 옆에 붙는 형태

언어 선택 (앵커형)

옵션이 버튼 아래에 붙어서 열립니다.

중앙형 (center) — 화면 중앙 모달 형태

언어 선택 (중앙형)

옵션이 화면 중앙에 팝업으로 열립니다.

Live Preview