Native Select

Native Select (네이티브 셀렉트)

미리 정의된 옵션에서 값을 고르는 컴포넌트예요. 브라우저 네이티브 <select> 요소를 활용해요.

출처: 문서

본문

사용법 (Usage)

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

<NativeSelect.Root>
  <NativeSelect.Field>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </NativeSelect.Field>
  <NativeSelect.Indicator />
</NativeSelect.Root>

:::info

폐쇄형 컴포넌트 구성을 선호한다면 아래 스니펫을 확인해 보세요.

:::

예제 (Examples)

크기 (Sizes)

size prop을 사용해 셀렉트 컴포넌트의 크기를 변경해요.

변형 (Variants)

variant prop을 사용해 셀렉트 컴포넌트의 모양을 변경해요.

제어 (Controlled)

value와 onChange prop을 사용해 셀렉트 컴포넌트를 제어해요.

비활성화 (Disabled)

NativeSelect.Root 컴포넌트에 disabled prop을 전달해 셀렉트 컴포넌트를 비활성화해요.

무효 (Invalid)

네이티브 셀렉트와 Field 컴포넌트를 조합해 무효 상태를 설정하고 오류 텍스트를 표시해요.

또는 NativeSelect.Root 컴포넌트에 invalid prop을 사용할 수도 있어요.

Hook Form

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

Ref

기본 요소 참조에 접근하는 방법이에요.

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

const Demo = () => {
  const ref = useRef<HTMLSelectElement | null>(null)
  return (
    <NativeSelect.Root>
      <NativeSelect.Field ref={ref}>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </NativeSelect.Field>
      <NativeSelect.Indicator />
    </NativeSelect.Root>
  )
}

폐쇄형 컴포넌트 (Closed Component)

네이티브 셀렉트를 폐쇄형 컴포넌트 구성으로 설정하는 방법이에요.

프로젝트에 폐쇄형 컴포넌트를 자동으로 추가하려면 다음 명령을 실행해요:

npx @chakra-ui/cli snippet add native-select

Props

Root

NativeSelect 컴포넌트의 Root 부분에 대한 prop 테이블 (대화형 문서 참고).

더 알아보기 (Learn more)