Skip to content
uiify

Native select

Wrapper around the native select element.

Browsers
Chrome 135+, Firefox 121+, Safari 17+
Tier
0
Bundle compressed
560 B
Forced layout budget
0 ms
Axe budget
0
SSR compatible
Yes
Published contract
Test harness

Playground

State
import { NativeSelect, NativeSelectContent, NativeSelectOption } from "@gunkin/uiify";

export default function Example() {
  return (
    <NativeSelect name="plan" aria-label="Plan" defaultValue="free">
      <NativeSelectContent>
        <NativeSelectOption value="free">Free</NativeSelectOption>
        <NativeSelectOption value="pro">Pro</NativeSelectOption>
      </NativeSelectContent>
    </NativeSelect>
  );
}

API

NativeSelectContent

PropTypeDefaultDescription
childrenReactNode——

NativeSelectOptGroup

PropTypeDefaultDescription
childrenReactNode——
labelstring——
render(props: Record<string, unknown> & { ref?: Ref<HTMLOptGroupElement>; }, state: NativeSelectOptGroupOwnProps) => ReactElement<...> | null——
asElementType"optgroup"—

NativeSelectOption

PropTypeDefaultDescription
childrenReactNode——
disabledbooleanfalse—
valuestring——
render(props: Record<string, unknown> & { ref?: Ref<HTMLOptionElement>; }, state: { disabled: boolean; }) => ReactElement<unknown, string | JSXElementConstructor<any>> | null——
asElementType"option"—

NativeSelect

PropTypeDefaultDescription
defaultValuestring | readonly string[]—Selects several options through the native `multiple` select.
multipleboolean——
onValueChange((value: string) => void) | ((value: string[]) => void)—Called with the selected value. Called with every selected value in option order.
valuestring | readonly string[]——
childrenReactNode——
disabledbooleanfalse—
namestring——
sizeControlSize—Sets the control's height and text size; `md` is the default.
render(props: Record<string, unknown> & { ref?: Ref<HTMLSelectElement>; }, state: NativeSelectOwnProps) => ReactElement<unknown, string | JSXElementConstructor<any>> | null——
asElementType"select"—

NativeSelectSeparator

PropTypeDefaultDescription
childrennever——
render(props: Record<string, unknown> & { ref?: Ref<HTMLHRElement>; }, state: Record<string, never>) => ReactElement<unknown, string | JSXElementConstructor<any>> | null——
asElementType"hr"—

Keyboard

KeyAction
Arrow keysChange option when focused
SpaceOpen native picker (platform)

Accessibility

Text-only native <select>; the browser owns selection, keyboard input, typeahead, and form submission. Supporting engines enhance only the picker appearance.

Styling hooks

  • data-disabled