mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
Danny White
7e9c483625
## What kind of change does this PR introduce?
UI component enhancement and Design System documentation update.
## What is the current behavior?
`MultiSelectorTrigger` can either limit the number of visible badges or
wrap every selected badge. Consumers cannot combine a numeric limit with
wrapping.
## What is the new behavior?
Adds `wrapBadges` so consumers can combine it with a numeric
`badgeLimit`. For example, `badgeLimit={3} wrapBadges` renders up to
three wrapped badges followed by the remaining `+n` count.
Existing `badgeLimit=\"wrap\"` behaviour remains supported.
## To test
1. Open the Design System Multi Select page.
2. Find the **Wrapped badge limit** example.
3. Confirm three selected fruit badges wrap within the trigger and the
remaining selections appear as `+2`.
4. Remove or add selections and confirm the visible badges and remaining
count update together.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added a `wrapBadges` option to multi-select triggers, allowing
selected badges to wrap across multiple lines while retaining a numeric
badge limit.
- Numeric limits now show the specified badges and an overflow count for
additional selections.
- Updated the example with controls for adjusting the badge limit.
- **Documentation**
- Clarified multi-select badge limit and wrapping behavior.
- **Tests**
- Added coverage for badge limits, wrapping, visible selections, and
overflow counts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
93 lines
2.4 KiB
Plaintext
93 lines
2.4 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,
|
|
MultiSelectorContent,
|
|
MultiSelectorItem,
|
|
MultiSelectorTrigger,
|
|
} 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" />
|
|
|
|
### Without trigger icon
|
|
|
|
Set `showIcon={false}` to hide the trigger icon.
|
|
|
|
<ComponentPreview name="multi-select-without-icon" />
|
|
|
|
### Badge Combo Box
|
|
|
|
Use `MultiSelectorInput`to add a search input.
|
|
|
|
<ComponentPreview name="multi-select-combobox" />
|
|
|
|
### Badge Combo Box with creatable selector
|
|
|
|
creatable: `boolean`
|
|
`creatable` prop on the `MultiSelectorList` component can be used to add a new option if no items match
|
|
|
|
<ComponentPreview name="multi-select-combobox-creatable" />
|
|
|
|
### 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" />
|
|
|
|
### Wrapped badge limit
|
|
|
|
Combine `badgeLimit` with `wrapBadges` to limit the number of badges and allow them to wrap onto additional lines. Use `badgeLimit="wrap"` to show and wrap every selected badge.
|
|
|
|
<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" />
|
|
|
|
### Inside a dialog
|
|
|
|
Use `mode="inline-combobox"` on the `MultiSelectorTrigger` component to add an inline search input.
|
|
|
|
<ComponentPreview name="multi-select-in-dialog" />
|