Capture user feedback limited to large set of options


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.

This is anonymous
{ 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"


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

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-accordion" /> // -> id is static, no mismatches


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
Build fully functional accessible web applications with ease
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback