Select (Native)

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

If you prefer a closed component composition, check out the snippet below.

:::

Examples

Sizes

Use the size prop to change the size of the select component.

Variants

Use the variant prop to change the appearance of the select component.

Controlled

Use the value and onChange props to control the select component.

Disabled

Pass the disabled prop to the NativeSelect.Root component to disable the select component.

Invalid

Compose the native and Field component to set the invalid set and show the error text.

Alternatively, you can use the invalid prop on the NativeSelect.Root component as well.

Hook Form

Here is an example of how to use the NativeSelect component with react-hook-form.

Ref

Here's how to access the underlying element reference

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

Here's how to setup the Native Select for a closed component composition.

If you want to automatically add the closed component to your project, run the command:

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

Props

Root

Explorer

Explore the Select (Native) component parts interactively. Click on parts in the sidebar to highlight them in the preview.