SelectBox - Kitchen Sink

기본 사용법

items prop으로 옵션 목록을 제공합니다.

국가 선택

          <SelectBox items=[object Object][object Object][object Object][object Object]
          placeholder="select country" aria-label="Select country" />
        

초기값 설정

defaultValue 또는 value prop으로 초기 선택값을 설정할 수 있습니다.

배송 방법 (기본값: express)

          <SelectBox items=[object Object][object Object][object Object]
          defaultValue="express" aria-label="Select shipping method" />
        

그룹 레이블

groupLabel prop으로 옵션 목록 상단에 레이블을 표시할 수 있습니다.

카테고리 선택

          <SelectBox items=[object Object][object Object][object Object]
          groupLabel="제품 카테고리" placeholder="카테고리 선택" />
        

상태별 스타일링

disabled 및 invalid 상태에 대한 스타일링이 자동으로 적용됩니다.

Disabled 상태

          <SelectBox items=[object Object][object Object]
          placeholder="Disabled select" isDisabled=true
          />
        

Invalid 상태

          <SelectBox items=[object Object][object Object]
          aria-invalid=true
          />
        

접근성 속성 (ARIA)

접근성을 위한 ARIA 속성을 추가할 수 있습니다.

국가 *

          <label id="country-label">국가 *</label> <SelectBox items=[object Object][object Object][object Object]
          aria-labelledby="country-label" aria-required=true
          />
        

variant 설정

variant prop으로 드롭다운 포지셔닝 방식을 설정할 수 있습니다.

variant 설정 (기본값: default)

          <SelectBox items=[object Object][object Object]
          variant="default" aria-label="Select option" />
        

variant="inline"

          <SelectBox items=[object Object][object Object]
          variant="inline" aria-label="Select option" />
        

SelectBox Props

Prop	Type	Default	Description
`items`	SelectOption[]	-	선택 가능한 옵션 목록 (필수)
`placeholder`	string	'Select'	플레이스홀더 텍스트
`groupLabel`	string	-	그룹 레이블 (옵션 목록 상단에 표시)
`isDisabled`	boolean	false	비활성화 상태
`value`	string	-	제어된 값 (controlled)
`defaultValue`	string	-	초기 선택값 (uncontrolled)
`id`	string	자동 생성	고유 ID
`aria-label`	string	-	접근성 레이블
`aria-labelledby`	string	-	레이블 요소 ID
`aria-required`	boolean	false	필수 입력 표시
`aria-invalid`	boolean	false	유효성 검사 실패 표시
`variant`	'default' \| 'inline'	'default'	드롭다운 위치 스타일. 'default'는 absolute positioning을 사용하고, 'inline'은 일반 문서 플로우로 표시됩니다.