Select

Select (셀렉트)

Select는 미리 정의된 옵션 중에서 값을 선택할 때 사용하는 컴포넌트예요. 드롭다운 목록에서 하나 또는 여러 값을 선택할 수 있어요.

출처: 문서

본문

사용법 (Usage)

import { Select } from "@chakra-ui/react"

<Select.Root>
  <Select.HiddenSelect />
  <Select.Label />

  <Select.Control>
    <Select.Trigger>
      <Select.ValueText />
    </Select.Trigger>
    <Select.IndicatorGroup>
      <Select.Indicator />
      <Select.ClearTrigger />
    </Select.IndicatorGroup>
  </Select.Control>

  <Select.Positioner>
    <Select.Content>
      <Select.Item />

      <Select.ItemGroup>
        <Select.ItemGroupLabel />
        <Select.Item />
      </Select.ItemGroup>
    </Select.Content>
  </Select.Positioner>
</Select.Root>

셀렉트를 설정하려면 useListCollection을 사용해 list collection을 관리하세요.

예시 (Examples)

크기 (Sizes)

size prop을 사용해 셀렉트 컴포넌트의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop을 사용해 셀렉트 컴포넌트의 외형을 바꿀 수 있어요.

색상 팔레트 (Color Palette)

Select 컴포넌트는 폼 요소 간 일관성을 위해 기본적으로 중성 색으로 디자인돼요. 색상 팔레트를 적용하려면 colorPalette 토큰을 사용해 트리거와 인디케이터 컴포넌트를 직접 스타일링하세요.

옵션 그룹 (Option Group)

Select.ItemGroup 컴포넌트를 사용해 셀렉트 옵션을 그룹화할 수 있어요.

Controlled

value와 onValueChange props를 사용해 셀렉트 컴포넌트를 제어할 수 있어요.

비동기 로딩 (Async Loading)

원격 소스에서 셀렉트 collection을 채우는 예시예요.

Hook Form

Select 컴포넌트를 react-hook-form과 함께 사용하는 예시예요.

비활성화 (Disabled)

disabled prop을 사용해 셀렉트 컴포넌트를 비활성화할 수 있어요.

유효하지 않은 상태 (Invalid)

Field 컴포넌트와 Select 컴포넌트를 구성해 오류 상태를 표시하는 예시예요.

다중 선택 (Multiple)

multiple prop을 사용해 여러 값을 선택할 수 있게 해요.

위치 지정 (Positioning)

positioning prop을 사용해 셀렉트 컴포넌트의 내부 floating-ui 옵션을 제어할 수 있어요.

클리어 트리거 (Clear Trigger)

Select.ClearTrigger 컴포넌트를 렌더링해 클리어 버튼을 표시할 수 있어요. 클리어 버튼을 클릭하면 선택된 값이 지워져요.

넘침 (Overflow)

옵션이 너무 많으면 설정된 maxHeight 때문에 옵션이 컨테이너를 넘치게 돼요.

가상화 (Virtualized)

큰 컬렉션의 경우 Select를 @tanstack/react-virtual과 결합해 보이는 항목만 렌더링하고 스크롤을 반응형으로 유지할 수 있어요.

항목 설명 (Item Description)

각 항목에 설명을 렌더링하는 예시예요.

팝오버에서 열기 (Open From Popover)

Popover 컴포넌트 안에서 Select를 사용하는 예시예요.

다이얼로그에서 열기 (Open From Dialog)

Dialog 안에서 Select를 사용하려면, Select.Positioner를 문서의 body로 포털링하지 않아야 해요.

-<Portal>
  <Select.Positioner>
    <Select.Content>
      {/* ... */}
    </Select.Content>
  </Select.Positioner>
-</Portal>

Dialog에 scrollBehavior="inside"를 설정했다면 다음을 처리해야 해요:

  • 셀렉트가 다이얼로그에 잘리지 않도록 셀렉트 위치를 fixed로 설정해요.
  • 트리거가 화면 밖으로 스크롤되면 셀렉트를 숨기도록 hideWhenDetached를 true로 설정해요.
<Select.Root positioning={{ strategy: "fixed", hideWhenDetached: true }}>
  {/* ... */}
</Select.Root>

아바타 셀렉트 (Avatar Select)

Select와 Avatar를 구성하는 예시예요.

국가 셀렉트 (Country Select)

Select 컴포넌트를 사용해 국가를 선택하는 예시예요.

아이콘 버튼 (Icon Button)

IconButton으로 셀렉트 컴포넌트를 트리거하는 예시예요.

Props

Select의 Root 파트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.

더 알아보기 (Learn more)