Skip to content
Docs

Select

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Select } from "@hua-labs/hua";

:
-

default
outline
filled
ghost

sm
md
lg

normal
error
success

variant"default" | "outline" | "filled" | "ghost" | "glass""default"Visual style variant
size"sm" | "md" | "lg""md"Select size
errorbooleanfalseError state indicator
successbooleanfalseSuccess state indicator
leftIconReactNode-Icon displayed on the left side
placeholderstring-Placeholder text when no option selected
disabledbooleanfalseDisables the select

docs:common.basicUsagetsx
import { Select } from '@hua-labs/hua';

<Select>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</Select>
With Placeholdertsx
<Select placeholder="Select a fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</Select>
With Icontsx
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: Provides accessible name for screen readers
  • •aria-invalid: Applied in error state for screen readers
  • •Focus Ring: Clear focus indicator for keyboard navigation
  • •Disabled State: Properly announced as disabled to screen readers
RadioSwitch