Select (Native)

Usage

import { NativeSelect } from "chakra-ui-solid";

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

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.

Ref

Here’s how to access the underlying element reference. Solid has no forwardRef, so there is nothing to wrap: a ref is a prop like any other and reaches the element on the spread.

import { NativeSelect } from "chakra-ui-solid";
 
const Demo = () => {
  let ref: HTMLSelectElement | undefined;
  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.

Props

Root