NativeSelect

Capture user feedback limited to large set of options
Import

Usage

This is anonymous
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { NativeSelect } from '@mantine/core';
function Demo() {
return (
<NativeSelect
data={['React', 'Vue', 'Angular', '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)}
data={[]}
/>
);
}

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

import { NativeSelect } from '@mantine/core';
function Demo() {
return <NativeSelect disabled data={[]} />;
}

With icon

import { NativeSelect } from '@mantine/core';
import { Hash } from 'tabler-icons-react';
function Demo() {
return (
<NativeSelect
label="Pick a hashtag"
placeholder="Pick a hashtag"
data={['React', 'Angular', 'Svelte', 'Vue']}
icon={<Hash size={14} />}
/>
);
}

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:

import { NativeSelect } from '@mantine/core';
import { ChevronDown } from 'tabler-icons-react';
function Demo() {
return (
<NativeSelect
label="Your favorite library/framework"
placeholder="Your favorite library/framework"
data={['React', 'Angular', 'Svelte', 'Vue']}
rightSection={<ChevronDown size={14} />}
rightSectionWidth={40}
/>
);
}

Get input ref

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

Accessibility

Provide aria-label in case you use component without label for screen reader support:

<NativeSelect /> // -> not ok, select is not labeled
<NativeSelect label="My select" /> // -> ok, select and label is connected
<NativeSelect aria-label="My select" /> // -> ok, label is not visible but will be announced by screen reader