Select

Select

커스텀 검색 가능한 셀렉트 컴포넌트예요. Combobox 컴포넌트 위에 구축된 의견이 담긴(opinionated) 컴포넌트예요.

출처: 문서

본문

Combobox로 제작 (Made with Combobox)

Select은 Combobox 컴포넌트 위에 구축된 의견이 담긴 컴포넌트예요. 기본 사용 사례만 다루는 제한된 기능 세트를 가져요. 더 고급 기능이 필요하다면 Combobox로 자신만의 컴포넌트를 만들 수 있어요. 커스텀 셀렉트 컴포넌트 예시는 예시 페이지에서 찾을 수 있어요.

사용법 (Usage)

Select은 목록의 제안을 기반으로 사용자 입력을 포착할 수 있어요. Autocomplete와 달리 Select은 커스텀 값을 입력할 수 없어요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select label="Your favorite library" placeholder="Pick value" data={['React', 'Angular', 'Vue', 'Svelte']} />;
}

로딩 상태 (Loading state)

loading prop을 설정하면 로딩 인디케이터가 표시돼요. 기본적으로 로더는 인풋 오른쪽에 표시돼요. API 호출, 검색, 검증 같은 비동기 작업에 유용해요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select label="Your favorite library" placeholder="Pick value" data={['React', 'Angular', 'Vue']} loading />;
}

제어 방식 (Controlled)

Select의 값은 원시 타입(문자열, 숫자, boolean)이어야 해요. onChange 함수는 단일 인자로 원시 값을 받아요.

import { useState } from 'react';
import { Select } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('');
  return <Select data={['React', 'Angular', 'Vue']} value={value} onChange={setValue} />;
}

onChange 핸들러

onChange는 두 인자로 호출돼요.

• value – 선택된 옵션의 문자열 값
• option – 선택된 옵션 객체

상태에서 객체 형식을 선호한다면 onChange 핸들러의 두 번째 인자를 사용해요.

import { useState } from 'react';
import { ComboboxItem, Select } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState<ComboboxItem | null>(null);
  return (
    <Select
      data={['React', 'Angular', 'Vue']}
      value={value?.value}
      onChange={(_value, option) => setValue(option)}
    />
  );
}

autoSelectOnBlur

autoSelectOnBlur prop으로 인풋이 포커스를 잃을 때 하이라이트된 옵션을 자동으로 선택할 수 있어요. 이 prop은 searchable이 true일 때만 효과가 있어요. 이 기능을 보려면 위/아래 화살표로 옵션을 선택한 뒤 인풋 밖을 클릭해요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select label="Your favorite library" placeholder="Pick value" data={['React', 'Angular', 'Vue']} searchable autoSelectOnBlur />;
}

지우기 가능 (Clearable)

clearable prop을 설정하면 오른쪽 섹션에 지우기 버튼이 표시돼요. 다음 경우에는 버튼이 표시되지 않아요.

• 컴포넌트에 값이 없을 때
• 컴포넌트가 비활성화되었을 때
• 컴포넌트가 읽기 전용일 때

import { Select } from '@mantine/core';

function Demo() {
  return <Select label="Your favorite library" placeholder="Pick value" data={['React', 'Angular', 'Vue']} defaultValue="React" clearable />;
}

지우기 섹션 모드 (Clear section mode)

clearSectionMode prop은 지우기 버튼과 rightSection이 어떻게 렌더링되는지 결정해요.

• 'both' (기본값) – 지우기 버튼과 rightSection 모두 렌더링
• 'rightSection' – 사용자가 제공한 rightSection만 렌더링, 지우기 버튼 무시
• 'clear' – 지우기 버튼만 렌더링, rightSection 무시

import { CaretDownIcon } from '@phosphor-icons/react';
import { Select, Stack } from '@mantine/core';

const data = ['React', 'Angular', 'Vue'];

function Demo() {
  const rightSection = <CaretDownIcon size={16} />;
  return (
    <Stack>
      <Select label="clearSectionMode='both' (default)" data={data} defaultValue="React" clearable rightSection={rightSection} />
      <Select label="clearSectionMode='rightSection'" data={data} defaultValue="React" clearable clearSectionMode="rightSection" rightSection={rightSection} />
      <Select label="clearSectionMode='clear'" data={data} defaultValue="React" clearable clearSectionMode="clear" rightSection={rightSection} />
    </Stack>
  );
}

선택 해제 허용 (Allow deselect)

allowDeselect prop은 사용자가 선택된 옵션을 클릭했을 때 값을 선택 해제할지 결정해요. 기본적으로 allowDeselect는 true예요.

import { Select } from '@mantine/core';

function Demo() {
  return (
    <>
      <Select label="Option can NOT be deselected" data={['React', 'Angular', 'Vue']} defaultValue="React" allowDeselect={false} />
      <Select label="Option can be deselected" data={['React', 'Angular', 'Vue']} defaultValue="React" mt="md" />
    </>
  );
}

포커스 시 열기 (Open on focus)

openOnFocus prop으로 인풋이 포커스를 받을 때 드롭다운을 열 수 있어요. 이 prop은 searchable이 true일 때만 효과가 있어요.

import { Select } from '@mantine/core';

function Demo() {
  return (
    <>
      <Select label="Opens on focus" data={['React', 'Angular', 'Vue']} searchable openOnFocus />
      <Select label="Does not open on focus" data={['React', 'Angular', 'Vue']} searchable mt="md" />
    </>
  );
}

검색 가능 (Searchable)

searchable prop으로 사용자 입력에 따라 옵션을 필터링할 수 있어요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select label="Your favorite library" placeholder="Pick value" data={['React', 'Angular', 'Vue', 'Svelte']} searchable />;
}

제어되는 검색 값 (Controlled search value)

searchValue와 onSearchChange prop으로 검색 값을 제어할 수 있어요.

import { useState } from 'react';
import { Select } from '@mantine/core';

function Demo() {
  const [searchValue, setSearchValue] = useState('');
  return <Select searchValue={searchValue} onSearchChange={setSearchValue} data={['React', 'Angular', 'Vue']} searchable />;
}

결과 없음 (Nothing found)

nothingFoundMessage prop으로 검색 쿼리와 일치하는 옵션이 없거나 사용 가능한 데이터가 없을 때 주어진 메시지를 표시할 수 있어요. nothingFoundMessage prop이 설정되지 않으면 Select 드롭다운이 숨겨져요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select label="Your favorite library" placeholder="Pick value" data={['React', 'Angular', 'Vue']} searchable nothingFoundMessage="Nothing found..." />;
}

체크 옵션 아이콘 (Checked option icon)

checkIconPosition prop을 left 또는 right로 설정해 활성 옵션의 체크 아이콘 위치를 제어할 수 있어요. 체크 아이콘을 제거하려면 withCheckIcon={false}를 설정해요. 체크되지 않은 라벨을 체크된 것과 정렬하려면 withAlignedLabels prop을 설정해요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select label="Control check icon" data={['React', 'Angular', 'Vue']} defaultValue="React" checkIconPosition="right" withAlignedLabels />;
}

값 타입 (Value type)

Select은 값 타입으로 원시 값(문자열, 숫자, boolean)을 지원해요. Select은 값 타입을 자동으로 추론해요. 값 타입을 명시하려면 타입 인자를 전달해요.

import { Select } from '@mantine/core';

type SelectValue = 'React' | 'Angular' | 'Svelte' | number;

function Demo() {
  return <Select<SelectValue> data={['React', 'Angular', 'Svelte', 100]} />;
}

데이터 형식 (Data formats)

Select의 data prop은 다음 형식 중 하나로 데이터를 받아요.

원시 값(문자열, 숫자, boolean) 배열:

import { Select } from '@mantine/core';

function Demo() {
  return <Select data={['React', 'Angular', 'Vue']} />;
}

value, label과 선택적 disabled 키를 가진 객체 배열:

import { Select } from '@mantine/core';

function Demo() {
  return (
    <Select
      data={[
        { value: 'react', label: 'React' },
        { value: 'angular', label: 'Angular' },
        { value: 'vue', label: 'Vue', disabled: true },
      ]}
    />
  );
}

원시 값(문자열, 숫자, boolean) 옵션을 가진 그룹 배열:

import { Select } from '@mantine/core';

function Demo() {
  return (
    <Select
      data={[
        { group: 'Frontend', items: ['React', 'Angular', 'Vue'] },
        { group: 'Backend', items: ['Express', 'Koa', 'Django'] },
      ]}
    />
  );
}

객체 옵션을 가진 그룹 배열:

import { Select } from '@mantine/core';

function Demo() {
  return (
    <Select
      data={[
        { group: 'Frontend', items: [{ value: 'react', label: 'React' }, { value: 'angular', label: 'Angular' }] },
        { group: 'Backend', items: [{ value: 'express', label: 'Express' }, { value: 'koa', label: 'Koa' }] },
      ]}
    />
  );
}

옵션 필터링 (Options filtering)

기본적으로 Select은 옵션 라벨에 인풋 값이 포함되어 있는지 확인해 옵션을 필터링해요. filter prop으로 이 동작을 바꿀 수 있어요. filter 함수는 단일 인자로 다음 속성을 가진 객체를 받아요.

• options – 옵션 또는 옵션 그룹 배열, 모든 옵션은 { value: string; label: string; disabled?: boolean } 형식
• search – 현재 검색 쿼리
• limit – Select에 전달된 limit prop 값

글자 순서 대신 단어로 옵션을 매칭하는 커스텀 필터 함수 예시:

import { Select, ComboboxItem, OptionsFilter } from '@mantine/core';

const optionsFilter: OptionsFilter = ({ options, search }) => {
  const splittedSearch = search.toLowerCase().trim().split(' ');
  return (options as ComboboxItem[]).filter((option) => {
    const words = option.label.toLowerCase().trim().split(' ');
    return splittedSearch.every((searchWord) => words.some((word) => word.includes(searchWord)));
  });
};

function Demo() {
  return <Select label="Your country" data={['Republic of Korea', 'United States', 'United Kingdom', 'Germany', 'France']} searchable filter={optionsFilter} />;
}

옵션 정렬 (Sort options)

기본적으로 옵션은 데이터 배열에서의 위치에 따라 정렬돼요. filter 함수로 이 동작을 바꿀 수 있어요.

import { Select, ComboboxItem, OptionsFilter } from '@mantine/core';

const optionsFilter: OptionsFilter = ({ options, search }) => {
  const filtered = (options as ComboboxItem[]).filter((option) =>
    option.label.toLowerCase().trim().includes(search.toLowerCase().trim())
  );

  filtered.sort((a, b) => a.label.localeCompare(b.label));
  return filtered;
};

function Demo() {
  return <Select label="Your favorite library" data={['Vue', 'React', 'Angular', 'Svelte']} searchable filter={optionsFilter} />;
}

fuse.js로 퍼지 검색 (Fuzzy search with fuse.js)

fuse.js 라이브러리를 사용해 오타나 부분 일치가 있어도 옵션을 매칭하는 퍼지 검색을 구현할 수 있어요.

import { Select, ComboboxItem, OptionsFilter } from '@mantine/core';
import Fuse from 'fuse.js';

const optionsFilter: OptionsFilter = ({ options, search }) => {
  if (!search.trim()) {
    return options;
  }

  const fuse = new Fuse(options as ComboboxItem[], {
    keys: ['label'],
    threshold: 0.3,
    minMatchCharLength: 1,
  });

  return fuse.search(search).map((result) => result.item);
};

function Demo() {
  return <Select label="Your country" data={['England', 'France', 'Germany', 'Italy', 'Spain']} searchable filter={optionsFilter} />;
}

대규모 데이터 세트 (Large data sets)

대규모 데이터 세트의 가장 좋은 전략은 한 번에 렌더링되는 옵션 수를 제한하는 것이에요. limit prop으로 이렇게 할 수 있어요. 커스텀 filter 함수를 사용한다면 filter에서 옵션 수를 제한하는 자체 로직을 구현해야 해요.

import { Select } from '@mantine/core';

const largeData = Array(100_000)
  .fill(0)
  .map((_, index) => `Option ${index}`);

function Demo() {
  return <Select label="100 000 options autocomplete" data={largeData} limit={5} searchable />;
}

renderOption

renderOption 콜백으로 옵션 렌더링을 커스터마이즈할 수 있어요. 옵션 객체와 체크 상태와 함께 호출돼요. 함수는 React 노드를 반환해야 해요.

import { TextAlignCenterIcon, TextAlignJustifyIcon, TextAlignLeftIcon, TextAlignRightIcon, CheckIcon } from '@phosphor-icons/react';
import { Group, Select, SelectProps } from '@mantine/core';

const iconProps = {
  color: 'currentColor',
  opacity: 0.6,
  size: 18,
};

const icons: Record<string, React.ReactNode> = {
  left: <TextAlignLeftIcon {...iconProps} />,
  center: <TextAlignCenterIcon {...iconProps} />,
  right: <TextAlignRightIcon {...iconProps} />,
  justify: <TextAlignJustifyIcon {...iconProps} />,
};

const renderSelectOption: SelectProps['renderOption'] = ({ option, checked }) => (
  <Group flex="1" gap="xs">
    {icons[option.value]}
    {option.label}
    {checked && <CheckIcon style={{ marginInlineStart: 'auto' }} size={14} />}
  </Group>
);

function Demo() {
  return (
    <Select
      label="Select with renderOption"
      placeholder="Pick text align"
      data={[
        { value: 'left', label: 'Left' },
        { value: 'center', label: 'Center' },
        { value: 'right', label: 'Right' },
        { value: 'justify', label: 'Justify' },
      ]}
      renderOption={renderSelectOption}
    />
  );
}

스크롤 가능한 드롭다운 (Scrollable dropdown)

기본적으로 옵션 목록은 ScrollArea.Autosize로 감싸져요. 기본 설정을 변경하지 않았다면 maxDropdownHeight prop으로 드롭다운 최대 높이를 제어할 수 있어요.

네이티브 스크롤바를 사용하려면 withScrollArea={false}로 설정해요. 이 경우 Styles API로 드롭다운 스타일을 변경해야 해요.

드롭다운을 뷰포트 높이에 맞추기 (Fit dropdown to viewport height)

floatingHeight="viewport"로 설정하면 드롭다운이 뷰포트의 사용 가능한 세로 공간을 채우도록 커져요. 이 모드에서는 flip 미들웨어가 비활성화돼요. 드롭다운은 항상 설정된 방향으로 열리고 다른 쪽으로 뒤집히는 대신 뷰포트 가장자리에 제한돼요. 큰 옵션 목록을 다룰 때 유용해요.

import { Select } from '@mantine/core';

const data = Array(100).fill(0).map((_, index) => `Option ${index}`);

function Demo() {
  return <Select label="Fits viewport height" data={data} searchable floatingHeight="viewport" />;
}

옵션 그룹 (Group options)

import { Select } from '@mantine/core';

function Demo() {
  return (
    <Select
      label="Your favorite library"
      data={[
        { group: 'Frontend', items: ['React', 'Angular', 'Vue'] },
        { group: 'Backend', items: ['Express', 'Koa', 'Django'] },
      ]}
    />
  );
}

group 속성은 어떤 React 노드든 받아서, 일반 문자열 대신 커스텀 마크업(아이콘, 배지, 스타일된 텍스트)을 그룹 라벨로 렌더링할 수 있어요. 이는 MultiSelect, Autocomplete, TagsInput에도 적용돼요. NativeSelect은 네이티브 optgroup 요소를 렌더링하고 문자열 그룹 라벨만 지원해요.

비활성 옵션 (Disabled options)

옵션이 비활성화되면 선택할 수 없고 키보드 네비게이션에서 무시돼요.

import { Select } from '@mantine/core';

function Demo() {
  return (
    <Select
      label="Your favorite library"
      data={[
        { value: 'react', label: 'React' },
        { value: 'angular', label: 'Angular', disabled: true },
        { value: 'vue', label: 'Vue' },
      ]}
    />
  );
}

Combobox props

comboboxProps로 Combobox prop을 재정의할 수 있어요. Select에 노출되지 않는 일부 prop(예: withinPortal)을 변경해야 할 때 유용해요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select comboboxProps={{ withinPortal: false }} data={['React', 'Angular', 'Vue']} />;
}

드롭다운 z-index 변경 (Change dropdown z-index)

import { Select } from '@mantine/core';

function Demo() {
  return <Select comboboxProps={{ zIndex: 3000 }} data={['React', 'Angular', 'Vue']} />;
}

팝오버 안에서 사용 (Inside Popover)

팝오버 안에서 Select을 사용하려면 withinPortal: false로 설정해야 해요.

import { Popover, Button, Select } from '@mantine/core';

function Demo() {
  return (
    <Popover width={400} position="bottom" withArrow shadow="md">
      <Popover.Target><Button>Toggle popover</Button></Popover.Target>
      <Popover.Dropdown>
        <Select comboboxProps={{ withinPortal: false }} data={['React', 'Angular', 'Vue']} searchable />
      </Popover.Dropdown>
    </Popover>
  );
}

드롭다운 열림 상태 제어 (Control dropdown opened state)

dropdownOpened prop으로 드롭다운 열림 상태를 제어할 수 있어요. 또한 onDropdownClose와 onDropdownOpen으로 열림 상태 변경을 들을 수 있어요.

import { Select, Button } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [dropdownOpened, { toggle }] = useDisclosure();
  return (
    <>
      <Button onClick={toggle}>Toggle dropdown</Button>
      <Select data={['React', 'Angular', 'Vue']} label="Your favorite library" dropdownOpened={dropdownOpened} mt="md" />
    </>
  );
}

드롭다운 위치 (Dropdown position)

기본적으로 드롭다운은 공간이 충분하면 인풋 아래에, 그렇지 않으면 인풋 위에 표시돼요. position과 middlewares prop으로 이 동작을 변경할 수 있는데, 이 prop들은 내부 Popover 컴포넌트로 전달돼요.

항상 인풋 위에 표시되는 드롭다운 예시:

import { Select } from '@mantine/core';

function Demo() {
  return <Select comboboxProps={{ position: 'top' }} data={['React', 'Angular', 'Vue']} label="Your favorite library" />;
}

드롭다운 너비 (Dropdown width)

드롭다운 너비를 변경하려면 comboboxProps에서 width prop을 설정해요. 기본적으로 드롭다운 너비는 인풋 너비와 같아요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select comboboxProps={{ width: 400 }} data={['React', 'Angular', 'Vue']} label="Your favorite library" />;
}

드롭다운 오프셋 (Dropdown offset)

드롭다운 오프셋을 변경하려면 comboboxProps에서 offset prop을 설정해요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select comboboxProps={{ offset: 20 }} data={['React', 'Angular', 'Vue']} label="Your favorite library" />;
}

가로 무한 스크롤 방지 (Prevent horizontal infinite scrolling)

드롭다운에서 가로 무한 스크롤이 발생하면 shift 미들웨어 padding을 0으로 설정해요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select comboboxProps={{ middlewares: { shift: { padding: 0 } } }} data={['React', 'Angular', 'Vue']} />;
}

드롭다운 애니메이션 (Dropdown animation)

기본적으로 드롭다운 애니메이션은 비활성화돼 있어요. 활성화하려면 내부 Transition 컴포넌트로 전달될 transitionProps를 설정할 수 있어요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select comboboxProps={{ transitionProps: { transition: 'pop', duration: 200 } }} data={['React', 'Angular', 'Vue']} label="Your favorite library" />;
}

드롭다운 패딩 (Dropdown padding)

import { Select } from '@mantine/core';

function Demo() {
  return (
    <>
      <Select styles={{ dropdown: { padding: 0 } }} data={['React', 'Angular', 'Vue']} label="Zero padding" />
      <Select styles={{ dropdown: { padding: 10 } }} data={['React', 'Angular', 'Vue']} label="10px padding" mt="md" />
    </>
  );
}

드롭다운 그림자 (Dropdown shadow)

import { Select } from '@mantine/core';

function Demo() {
  return <Select comboboxProps={{ shadow: 'xl' }} data={['React', 'Angular', 'Vue']} label="Your favorite library" />;
}

왼쪽·오른쪽 섹션 (Left and right sections)

Select은 leftSection과 rightSection prop을 지원해요. 이 섹션들은 인풋 래퍼 안에서 절대 위치로 렌더링돼요. 아이콘, 인풋 컨트롤 또는 다른 요소를 표시하는 데 사용할 수 있어요.

섹션 스타일과 콘텐츠를 제어하려면 다음 prop을 사용할 수 있어요.

• rightSection/leftSection – 인풋의 해당 쪽에 렌더링할 React 노드
• rightSectionWidth/leftSectionWidth – 오른쪽 섹션의 너비와 인풋 해당 쪽의 패딩을 제어해요. 기본적으로 컴포넌트 size prop에 의해 제어돼요.
• rightSectionPointerEvents/leftSectionPointerEvents – 섹션의 pointer-events 속성을 제어해요. 비대화형 요소를 렌더링하고 싶다면 none으로 설정해 클릭이 인풋으로 통과하게 해요.

import { Select } from '@mantine/core';
import { SquaresFourIcon } from '@phosphor-icons/react';

function Demo() {
  const icon = <SquaresFourIcon size={16} />;
  return (
    <>
      <Select leftSection={icon} data={['React', 'Angular', 'Vue']} label="With left section" />
      <Select rightSection={icon} rightSectionPointerEvents="none" data={['React', 'Angular', 'Vue']} label="With right section" mt="md" />
    </>
  );
}

Input props

Select 컴포넌트는 Input 및 Input.Wrapper 컴포넌트 기능과 모든 input 요소 prop을 지원해요. Select 문서에는 컴포넌트가 지원하는 모든 기능이 포함되지는 않아요. 사용 가능한 모든 기능은 Input 문서를 참고해요.

읽기 전용 (Read only)

readOnly로 설정하면 인풋을 읽기 전용으로 만들 수 있어요. readOnly가 설정되면 Select은 제안을 표시하지 않고 onChange 함수도 호출하지 않아요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select label="Your favorite library" placeholder="Pick value" data={['React', 'Angular', 'Vue']} defaultValue="React" readOnly />;
}

비활성 (Disabled)

disabled로 설정하면 인풋을 비활성화할 수 있어요. disabled가 설정되면 사용자가 인풋과 상호작용할 수 없고 Select은 제안을 표시하지 않아요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select label="Your favorite library" placeholder="Pick value" data={['React', 'Angular', 'Vue']} disabled />;
}

오류 상태 (Error state)

import { Select } from '@mantine/core';

function Demo() {
  return (
    <>
      <Select label="Boolean error" error data={['React', 'Angular']} />
      <Select label="With error message" error="Invalid name" data={['React', 'Angular']} mt="md" />
    </>
  );
}

성공 상태 (Success state)

import { Select } from '@mantine/core';

function Demo() {
  return <Select label="Select" error="Looks good!" data={['React', 'Angular', 'Vue']} defaultValue="React" />;
}

Styles API

Select은 Styles API를 지원해요. classNames prop으로 컴포넌트의 내부 요소에 스타일을 추가할 수 있어요.

Styles API 셀렉터:

• wrapper – Input의 루트 요소
• input – 인풋 요소
• section – 왼쪽·오른쪽 섹션
• bottomSection – 인풋 테두리 하단 안쪽에 렌더링되는 아래쪽 섹션 요소
• root – 루트 요소
• label – 라벨 요소
• required – 라벨 안에 렌더링되는 필수 별표 요소
• description – 설명 요소
• error – 오류 요소
• success – 성공 요소
• dropdown – 드롭다운 루트 요소
• options – 옵션 래퍼
• option – 옵션
• empty – 결과 없음 메시지
• group – 옵션 그룹 래퍼
• groupLabel – 옵션 그룹 라벨

요소 ref 가져오기 (Get element ref)

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

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

접근성 (Accessibility)

label prop 없이 Select을 사용하면 스크린 리더가 제대로 알리지 못해요.

// Inaccessible input – screen reader will not announce it properly
import { Select } from '@mantine/core';
function Demo() { return <Select placeholder="Pick value" data={['React', 'Angular']} />; }

aria-label을 설정하면 인풋을 접근 가능하게 만들 수 있어요. 이 경우 라벨은 보이지 않지만 스크린 리더가 알려줘요.

// Accessible input – it has aria-label
import { Select } from '@mantine/core';
function Demo() { return <Select aria-label="Your favorite library" data={['React', 'Angular']} />; }

label prop이 설정되어 있으면 인풋은 접근 가능하며 aria-label을 설정할 필요가 없어요.

지우기 버튼의 aria-label을 설정하려면 clearButtonProps를 사용해요. clearable이 설정된 경우에만 필요해요.

import { Select } from '@mantine/core';

function Demo() {
  return <Select clearable clearButtonProps={{ 'aria-label': 'Clear selection' }} data={['React', 'Angular']} defaultValue="React" />;
}

더 알아보기 (Learn more)

• PillsInput
• TagsInput
• Combobox