Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Select (Native)

Used to pick a value from predefined options.

SourceStorybookRecipe

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>

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>
  )
})

Props

Root

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

variant 'outline'
'outline' | 'filled' | 'plain'

The variant of the component

size 'md'
'lg' | 'md' | 'sm' | 'xs'

The size of the component

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.

Previous

Segmented Control

Next

Select