Base component for custom tags inputs and multi selects
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.
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:
PillsInput component supports Input and Input.Wrapper component features and all div element props. The PillsInput documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
Combine PillsInput with Combobox to create a searchable multiselect:
If PillsInput is used without the label prop, it will not be announced properly by screen readers:
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:
If the label prop is set, the input will be accessible and it is not required to set aria-label :