apps/help.mantine.dev/src/pages/q/multiselect-value-placeholder.mdx
import { MultiSelectPlaceholderDemo } from '@/demos/MultiSelectPlaceholder.demo'; import { Layout } from '@/layout';
export const meta = { title: 'Can I remove MultiSelect placeholder when the component has selected values?', description: 'Learn why MultiSelect placeholder is not removed when values are selected and how to remove it with CSS', slug: 'multiselect-value-placeholder', category: 'components', tags: ['multi-select', 'placeholder'], created_at: 'July 23, 2024', last_updated_at: 'July 23, 2024', };
export default Layout(meta);
The MultiSelect component uses the placeholder to indicate that there are values available for selection. It is different from the Select component where the placeholder is removed when a value is selected – the user can select only one value.
Apply the following styles to the MultiSelect component to remove the placeholder when values are selected:
<Demo data={MultiSelectPlaceholderDemo} />