From dbc173dc2b54178a5127f00ccf84d75e1b2763ca Mon Sep 17 00:00:00 2001 From: Gururaj J <89023023+Gururajj77@users.noreply.github.com> Date: Wed, 23 Oct 2024 20:56:07 +0530 Subject: [PATCH] docs: updated multiselect docs with select all feature details and usage (#17758) * docs: updated multiselect docs with select all feature usage * Update packages/react/src/components/MultiSelect/MultiSelect.mdx Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> * Update packages/react/src/components/MultiSelect/MultiSelect.mdx Co-authored-by: Alison Joseph * Update packages/react/src/components/MultiSelect/MultiSelect.mdx Co-authored-by: Alison Joseph * docs: added select all to navigation --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> Co-authored-by: Alison Joseph --- .../components/MultiSelect/MultiSelect.mdx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/react/src/components/MultiSelect/MultiSelect.mdx b/packages/react/src/components/MultiSelect/MultiSelect.mdx index d0c835c0253d..71aea1eb51a6 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.mdx +++ b/packages/react/src/components/MultiSelect/MultiSelect.mdx @@ -19,6 +19,7 @@ import * as MultiSelect from './MultiSelect.stories'; - [Overview](#overview) - [With initial selected items](#with-initial-selected-items) + - [Select all](#select-all) - [Filtering](#filtering) - [With layer](#with-layer) - [Component API](#component-api) @@ -42,6 +43,29 @@ By passing items into the `initialSelectedItems` prop, they can be pre-selected. +### Select all + +The MultiSelect component includes a "Select All" feature, allowing users to +easily select or deselect all options with a single action. + +To implement the "Select All" feature in your MultiSelect component, add a new +option to your options array with these properties: + +- `id`: A unique identifier (e.g., 'select-all') +- `text`: The label for the option +- `isSelectAll`: Set to `true` + +``` +const options = [ + { + id: 'select-all', + text: 'All roles', + isSelectAll: true, + }, + // ... other options +]; +``` + ### Filtering The `FilterableMultiSelect` component allows for filtering the list of