mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
Francesco Sansalvadore
d06c971118
* multi-select v2
* update values
* multi-select 2 wip
* multi select 2
* multi select with combobox
* use includs
* finish multi select
* wrap badges
* overflow-x-scroll
* more
* remove multi select old from menu
* add inline search input mode in multi-select
* fix size type
* reset input when adding item
* update studio multiselector
* remove console.log
* flex-1
* remove old multi-select and decrease badge padding
* remove removeEventListener
* fix errors
* fix
* try only command
* restore inline
* Revert "fix"
This reverts commit 2fc1bea1c6.
* change callback depencency
* remove useCallback
* sdf
* remove Popover from multiselect
* udpate troubleshooting multiselect
* update
* form
* multiselect changelog
* try to remove useCallback
* fox
* bug found: checkbox in CommandItem no good
* clean up commented code
* clean up
* restore loading check
* cleanup type
* autofocus combobox input
* autofocus
* remove badgeLimit auto
* focus trigger button when hitting escape
* add tests for multi-select
* add disabled example
* remove console and useless function
* showResetIcon
* showResetIcon
* handleClose
* reset focus after reset
74 lines
1.8 KiB
Plaintext
74 lines
1.8 KiB
Plaintext
---
|
|
title: Multi Select
|
|
description: Multiple selection component.
|
|
component: true
|
|
fragment: true
|
|
---
|
|
|
|
<ComponentPreview name="multi-select-demo" description="" peekCode wide />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import {
|
|
MultiSelector,
|
|
MultiSelectorTrigger,
|
|
MultiSelectorContent,
|
|
MultiSelectorItem,
|
|
} from 'ui-patterns/multi-select'
|
|
```
|
|
|
|
```tsx
|
|
<MultiSelector
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
selected={selected}
|
|
onSelectedChange={onSelectedChange}
|
|
>
|
|
<MultiSelectorTrigger className="w-72" label="Fruits" />
|
|
<MultiSelectorContent sameWidthAsTrigger>
|
|
<MultiSelectorItem value="Apple">Apple</MultiSelectorItem>
|
|
<MultiSelectorItem value="Banana">Banana</MultiSelectorItem>
|
|
<MultiSelectorItem value="Grape">Grape</MultiSelectorItem>
|
|
<MultiSelectorItem value="Strawberry">Strawberry</MultiSelectorItem>
|
|
</MultiSelectorContent>
|
|
</MultiSelector>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Disabled
|
|
|
|
<ComponentPreview name="multi-select-disabled" />
|
|
|
|
### Badge Combo Box
|
|
|
|
Use `MultiSelectorInput`to add a search input.
|
|
|
|
<ComponentPreview name="multi-select-combobox" />
|
|
|
|
### Badge Limit
|
|
|
|
badgeLimit: `number` | `"wrap"`.
|
|
`badgeLimit` prop on the `MultiSelectorTrigger` component can be used to limit the number of badges displayed.
|
|
|
|
<ComponentPreview name="multi-select-badge-limit" />
|
|
|
|
### Badge Limit="wrap"
|
|
|
|
`badgeLimit` prop can also be "wrap" to wrap the badges to the next line.
|
|
|
|
<ComponentPreview name="multi-select-badge-limit-wrap" />
|
|
|
|
### Deletable Badge
|
|
|
|
Add the `deletableBadge` prop on the `MultiSelectorTrigger` component to enable badge removal directly from the badge.
|
|
|
|
<ComponentPreview name="multi-select-deletable-badge" />
|
|
|
|
### Inline search input
|
|
|
|
Use `mode="inline-combobox"` on the `MultiSelectorTrigger` component to add an inline search input.
|
|
|
|
<ComponentPreview name="multi-select-inline-search-input" />
|