NativeSelect
Usage
Use select when you need to capture user feedback limited to certain options. If you only have 2-5 options consider using RadioGroup instead of select, as it provides better UX for smaller data sets.
Component supports all props from Input (except for rightSection) and InputWrapper components.
<NativeSelectdata={[{ value: 'react', label: 'React' },{ value: 'vue', label: 'Vue' },{ value: 'ng', label: 'Angular' },{ value: 'svelte', label: 'Svelte' },]}placeholder="Pick one"label="Select your favorite framework/library"description="This is anonymous"required/>
Controlled
import { useState } from 'react';import { NativeSelect } from '@mantine/core';function Demo() {const [value, setValue] = useState('');return <NativeSelect value={value} onChange={(event) => setValue(event.currentTarget.value)} />;}
Invalid state and error
// Error as boolean – red border color<NativeSelect error />// Error as React node – red border color and message below input<NativeSelect error="Pick at least one item" />
Disabled state
<NativeSelect disabled />
With icon
You can use any React node as icon:
<NativeSelectlabel="Pick a hashtag"placeholder="Pick a hashtag"data={['React', 'Angular', 'Svelte', 'Vue']}icon={<HashIcon />}/>
Right section
You can replace icon in right section with rightSection prop.
Note that in this case clearable option will not work and will need to handle it yourself:
<NativeSelect rightSection={<ChevronDownIcon />} />
Get element ref
You can get input ref by passing elementRef prop to NativeSelect component:
import { useRef } from 'react';import { NativeSelect } from '@mantine/core';function Demo() {const ref = useRef(null);return <NativeSelect elementRef={ref} />;}
Server side rendering
Component uses use-id hook to generate unique ids and aria- attributes,
provide static id prop to prevent props mismatch:
<NativeSelect /> // -> random id generated both on client and server, props mismatch warning<NativeSelect id="my-select" /> // -> id is static, no mismatches
Accessibility
Provide aria-label in case you use component without label for screen reader support:
<NativeSelect label="My select" />; // -> ok, select and label is connected<NativeSelect />; // not ok, select is not labeled<NativeSelect aria-label="My select" />; // -> ok, label is not visible but will be announced by screen reader