v4.2.12

NativeSelect

Capture user feedback limited to large set of options
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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
Go back
MultiSelect – @mantine/core
Up next
NumberInput – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter