Pills Input

import { ComboboxDemos, PillsInputDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.PillsInput);

Usage

PillsInput is a utility component that can be used to create custom tag inputs, multi-selects, and other similar components. By itself it does not include any logic; it only renders given children. Usually, PillsInput is used in combination with the Pill component.

Loading state

Set loading prop to display a loading indicator. By default, the loader is displayed on the right side of the input. You can change the position with the loadingPosition prop to 'left' or 'right'. This is useful for async operations like API calls, searches, or validations:

Input props

Searchable select example

Combine PillsInput with Combobox to create a searchable multiselect:

Accessibility

If PillsInput is used without the label prop, it will not be announced properly by screen readers:

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

// Inaccessible input – screen readers will not announce it properly
function Demo() {
  return (
    <PillsInput>
      <PillsInput.Field />
    </PillsInput>
  );
}

Set aria-label on the PillsInput.Field component to make the input accessible. In this case the label will not be visible, but screen readers will announce it:

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

// Accessible input – it has aria-label
function Demo() {
  return (
    <PillsInput>
      <PillsInput.Field aria-label="Enter tags" />
    </PillsInput>
  );
}

If the label prop is set, the input will be accessible and it is not required to set aria-label:

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

// Accessible input – it has associated label element
function Demo() {
  return (
    <PillsInput label="Enter tags">
      <PillsInput.Field />
    </PillsInput>
  );
}