NativeSelect

Capture user feedback limited to large set of options
Import

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.

This is anonymous
Radius
Size
<NativeSelect
data={[
{ 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

Pick at least one item
// 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:

<NativeSelect
label="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 input ref

You can get input ref by passing ref prop to NativeSelect component:

import { useRef } from 'react';
import { NativeSelect } from '@mantine/core';
function Demo() {
const ref = useRef(null);
return <NativeSelect ref={ref} />;
}

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

TypeScript

Component props type

Import component props type:

import type { NativeSelectProps } from '@mantine/core';

NativeSelectProps extends React.ComponentPropsWithoutRef<'select'>, all other props are available under Component props tab.

NativeSelectStylesNames type

NativeSelectStylesNames type is a union with NativeSelect Styles API names:

import type { NativeSelectStylesNames } from '@mantine/core';
const selectClasses: Partial<Record<NativeSelectStylesNames, 'string'>> = {
label: 'select-label',
description: 'select-description',
};
<NativeSelect classNames={selectClasses} />;

See full styles descriptions list under Styles API tab.

Build fully functional accessible web applications faster than ever
Feedback
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