Select (Native)

Used to pick a value from predefined options.

AI TipWant to skip the docs? Use the MCP Server

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.

This is an error

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.

"use client"

import { NativeSelect as Select } from "@chakra-ui/react"
import * as React from "react"

type FieldProp = "name" | "value" | "onChange" | "defaultValue"

interface NativeSelectProps
  extends Omit<Select.RootProps, FieldProp>,
    Pick<Select.FieldProps, FieldProp> {
  icon?: React.ReactNode
  items: Array<{ label: string; value: string; disabled?: boolean }>
}

export const NativeSelect = React.forwardRef<
  HTMLSelectElement,
  NativeSelectProps
>(function NativeSelect(props, ref) {
  const {
    icon,
    children,
    name,
    items,
    value,
    defaultValue,
    onChange,
    ...rest
  } = props
  return (
    <Select.Root {...rest}>
      <Select.Field
        ref={ref}
        name={name}
        value={value}
        defaultValue={defaultValue}
        onChange={onChange}
      >
        {children}
        {items?.map((item) => (
          <option key={item.value} value={item.value} disabled={item.disabled}>
            {item.label}
          </option>
        ))}
      </Select.Field>
      <Select.Indicator>{icon}</Select.Indicator>
    </Select.Root>
  )
})

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

Prop	Default	Type
`colorPalette`	`gray`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`variant`	`outline`	`'outline' \| 'subtle' \| 'plain'` The variant of the component
`size`	`md`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` The size of the component
`disabled`		`boolean \| undefined`
`invalid`		`boolean \| undefined`
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.