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
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
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | — |
NativeSelectOptGroup
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | — |
label | string | — | — |
render | (props: Record<string, unknown> & { ref?: Ref<HTMLOptGroupElement>; }, state: NativeSelectOptGroupOwnProps) => ReactElement<...> | null | — | — |
as | ElementType | "optgroup" | — |
NativeSelectOption
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | — |
disabled | boolean | false | — |
value | string | — | — |
render | (props: Record<string, unknown> & { ref?: Ref<HTMLOptionElement>; }, state: { disabled: boolean; }) => ReactElement<unknown, string | JSXElementConstructor<any>> | null | — | — |
as | ElementType | "option" | — |
NativeSelect
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | readonly string[] | — | Selects several options through the native `multiple` select. |
multiple | boolean | — | — |
onValueChange | ((value: string) => void) | ((value: string[]) => void) | — | Called with the selected value. Called with every selected value in option order. |
value | string | readonly string[] | — | — |
children | ReactNode | — | — |
disabled | boolean | false | — |
name | string | — | — |
size | ControlSize | — | 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 | — | — |
as | ElementType | "select" | — |
NativeSelectSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
children | never | — | — |
render | (props: Record<string, unknown> & { ref?: Ref<HTMLHRElement>; }, state: Record<string, never>) => ReactElement<unknown, string | JSXElementConstructor<any>> | null | — | — |
as | ElementType | "hr" | — |
Keyboard
| Key | Action |
|---|---|
| Arrow keys | Change option when focused |
| Space | Open 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