Select

Capture user feedback limited to large set of options

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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. See full information about shared inputs props in inputs guide.

<Select
  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 React, { useState } from 'react';
import { Select } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('');
  return <Select value={value} onChange={(event) => setValue(event.currentTarget.value)} />;
}

Get element ref

You can get input ref by passing elementRef prop to Select component:

import React, { useRef } from 'react';
import { Select } from '@mantine/core';

function Demo() {
  const ref = useRef(null);
  return <Select elementRef={ref} />;
}

Accessibility

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

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