mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Danny White
8204854986
## Problem Studio lets people create an item while selecting one, but the design system does not document this pattern. ## Solution Document the create action in the Combobox guide with a focused example. The action sits below the options and leaves the current selection unchanged. Products can connect it to their own creation flow. | After | | --- | | <img width="552" height="352" alt="CleanShot 2026-09-30 at 10 57 46@2x" src="https://github.com/user-attachments/assets/69c8069c-d4f9-45e2-b3a1-6e5431e2aff9" /> | ## Review instructions 1. Open the design system Combobox page and find “[Create from list](https://design-system-git-dnywh-document-select-create-action-supabase.vercel.app/design-system/docs/components/combobox#create-from-list)”. 2. Select a bucket, then choose “New bucket”. Because it’s just an example, the selector closes without replacing the selected bucket. ## Checklist - [x] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a combobox example with a separate “New bucket” action. Choosing it closes the menu without changing the current selection; choosing an existing bucket updates the selection. * Added documentation showing how to use this create-action pattern, including guidance on labeling and positioning the action. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
141 lines
3.4 KiB
Plaintext
141 lines
3.4 KiB
Plaintext
---
|
|
title: Combobox
|
|
description: Autocomplete input and command palette with a list of suggestions.
|
|
component: true
|
|
source:
|
|
shadcn: true
|
|
---
|
|
|
|
<ComponentPreview name="combobox-demo" peekCode />
|
|
|
|
## Installation
|
|
|
|
The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
|
|
|
|
See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
'use client'
|
|
|
|
import { Check } from 'lucide-react'
|
|
import * as React from 'react'
|
|
import {
|
|
ComboboxTrigger,
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from 'ui'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const frameworks = [
|
|
{
|
|
value: 'next.js',
|
|
label: 'Next.js',
|
|
},
|
|
{
|
|
value: 'sveltekit',
|
|
label: 'SvelteKit',
|
|
},
|
|
{
|
|
value: 'nuxt.js',
|
|
label: 'Nuxt.js',
|
|
},
|
|
{
|
|
value: 'remix',
|
|
label: 'Remix',
|
|
},
|
|
{
|
|
value: 'astro',
|
|
label: 'Astro',
|
|
},
|
|
]
|
|
|
|
export function ComboboxDemo() {
|
|
const [open, setOpen] = React.useState(false)
|
|
const [value, setValue] = React.useState('')
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<ComboboxTrigger
|
|
aria-expanded={open}
|
|
data-state={open ? 'open' : 'closed'}
|
|
className={cn('w-[200px]', !value && 'text-foreground-lighter')}
|
|
>
|
|
{value
|
|
? frameworks.find((framework) => framework.value === value)?.label
|
|
: 'Select framework...'}
|
|
</ComboboxTrigger>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[200px] p-0">
|
|
<Command>
|
|
<CommandInput placeholder="Search framework..." />
|
|
<CommandList>
|
|
<CommandEmpty>No framework found.</CommandEmpty>
|
|
<CommandGroup>
|
|
{frameworks.map((framework) => (
|
|
<CommandItem
|
|
key={framework.value}
|
|
value={framework.value}
|
|
onSelect={(currentValue) => {
|
|
setValue(currentValue === value ? '' : currentValue)
|
|
setOpen(false)
|
|
}}
|
|
>
|
|
<Check
|
|
className={cn(
|
|
'mr-2 h-4 w-4',
|
|
value === framework.value ? 'opacity-100' : 'opacity-0'
|
|
)}
|
|
/>
|
|
{framework.label}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Combobox
|
|
|
|
<ComponentPreview name="combobox-demo" peekCode wide />
|
|
|
|
### Popover
|
|
|
|
<ComponentPreview name="combobox-popover" />
|
|
|
|
### Dropdown menu
|
|
|
|
<ComponentPreview name="combobox-dropdown-menu" />
|
|
|
|
### Responsive
|
|
|
|
You can create a responsive combobox by using the `<Popover />` on desktop and the `<Drawer />` components on mobile.
|
|
|
|
<ComponentPreview name="combobox-responsive" />
|
|
|
|
### Form
|
|
|
|
<ComponentPreview name="combobox-form" />
|
|
|
|
### Create from list
|
|
|
|
When users can create an option while choosing one, give the action a clear verb label and place it at the bottom of the list, separated from the existing options. Keep the current selection in place while they create the new option.
|
|
|
|
<ComponentPreview name="combobox-create-option" peekCode wide />
|