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']}
      label="Select your favorite framework/library"
      description="This is anonymous"
      withAsterisk
    />
  );
}

Data prop

NativeSelect component accepts data in the following formats:

  • Array of strings (when item value is the same as label): ['React', 'Angular']
  • Array of objects (when item value different label): [{ value: '1', label: 'React' }, { value: '2', label: 'Angular' }]

Note that item value should always be a string, other data formats (numbers, boolean, etc.) are not supported.

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 { IconHash } from '@tabler/icons-react';


function Demo() {
  return (
    <NativeSelect
      label="Pick a hashtag"
      placeholder="Pick a hashtag"
      data={['React', 'Angular', 'Svelte', 'Vue']}
      icon={<IconHash size="1rem" />}
    />
  );
}

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 { IconChevronDown } from '@tabler/icons-react';


function Demo() {
  return (
    <NativeSelect
      label="Your favorite library/framework"
      placeholder="Your favorite library/framework"
      data={['React', 'Angular', 'Svelte', 'Vue']}
      rightSection={<IconChevronDown size="1rem" />}
      rightSectionWidth={40}
    />
  );
}

Get input ref

import { useRef } from 'react';
import { NativeSelect } from '@mantine/core';


function Demo() {
  const ref = useRef<HTMLSelectElement>(null);
  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

NativeSelect component props

NameTypeDescription
data *
(string | SelectItem)[]
Data used to render options
description
ReactNode
Input description, displayed after label
descriptionProps
Record<string, any>
Props spread to description element
disabled
boolean
Disabled input state
error
ReactNode
Displays error message after input
errorProps
Record<string, any>
Props spread to error element
icon
ReactNode
Adds icon on the left side of input
iconWidth
Width<string | number>
Width of icon section
id
string
id is used to bind input and label, if not passed unique id will be generated for each input
inputContainer
(children: ReactNode) => ReactNode
Input container component, defaults to React.Fragment
inputWrapperOrder
("input" | "label" | "error" | "description")[]
Controls order of the Input.Wrapper elements
label
ReactNode
Input label, displayed before input
labelProps
Record<string, any>
Props spread to label element
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
required
boolean
Adds required attribute to the input and red asterisk on the right side of label
rightSection
ReactNode
Right section of input, similar to icon but on the right
rightSectionProps
Record<string, any>
Props spread to rightSection div element
rightSectionWidth
Width<string | number>
Width of right section, is used to calculate input padding-right
size
"xs" | "sm" | "md" | "lg" | "xl"
Input size
variant
Variants<"unstyled" | "default" | "filled">
Defines input appearance, defaults to default in light color scheme and filled in dark
withAsterisk
boolean
Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
wrapperProps
Record<string, any>
Props passed to root element (InputWrapper component)

NativeSelect component Styles API

NameStatic selectorDescription
wrapper.mantine-NativeSelect-wrapperRoot Input element
icon.mantine-NativeSelect-iconInput icon wrapper on the left side of the input, controlled by icon prop
input.mantine-NativeSelect-inputMain input element
rightSection.mantine-NativeSelect-rightSectionInput right section, controlled by rightSection prop
root.mantine-NativeSelect-rootRoot element
label.mantine-NativeSelect-labelLabel element styles, defined by label prop
error.mantine-NativeSelect-errorError element styles, defined by error prop
description.mantine-NativeSelect-descriptionDescription element styles, defined by description prop
required.mantine-NativeSelect-requiredRequired asterisk element styles, defined by required prop
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
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