Select

@hua-labs/ui

v1.1.0

다양한 스타일, 크기, 상태를 지원하는 드롭다운 선택 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Select } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 Select

플레이스홀더

제어됨

현재:

변형

default

outline

filled

ghost

크기

상태

normal

error

success

비활성화

아이콘 포함

Props

이름	타입	기본값	설명
`variant`	`"default" \| "outline" \| "filled" \| "ghost" \| "glass"`	`"default"`	시각적 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	셀렉트 크기
`error`	`boolean`	`false`	에러 상태 표시
`success`	`boolean`	`false`	성공 상태 표시
`leftIcon`	`ReactNode`	-	Icon displayed on the left side
`placeholder`	`string`	-	플레이스홀더 텍스트 (비활성화 옵션 추가)
`disabled`	`boolean`	`false`	비활성화 상태

코드 예시

기본 사용법tsx

import { Select } from '@hua-labs/ui';

<Select>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</Select>

플레이스홀더 포함tsx

<Select placeholder="Select a fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</Select>

아이콘 포함tsx

import { Globe } from "@phosphor-icons/react";

<Select leftIcon={<Globe className="h-4 w-4" />}>
  <option value="kr">Korea</option>
  <option value="us">USA</option>
</Select>

접근성

•aria-label: 스크린 리더에 접근 가능한 이름을 제공
•aria-invalid: 에러 상태에서 스크린 리더에 전달
•키보드 탐색을 위한 포커스 표시: 키보드 탐색을 위한 명확한 포커스 표시
•비활성화 상태를 적절히 전달: 비활성화 상태

Radio Switch