rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-09 06:55:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add combobox

Browse Source
This commit is contained in:
shadcn
2026-01-15 12:11:27 +04:00
parent bd4ef8e08c
commit 45480505d8
51 changed files with 1046 additions and 5098 deletions
Download Patch File Download Diff File Expand all files Collapse all files

334
apps/v4/content/docs/components/base/combobox.mdx
View File

@@ -1,8 +1,11 @@
---
title: Combobox
description: Autocomplete input and command palette with a list of suggestions.
description: Autocomplete input with a list of suggestions.
base: base
component: true
links:
doc: https://base-ui.com/react/components/combobox
api: https://base-ui.com/react/components/combobox#api-reference
---
<ComponentPreview
@@ -13,137 +16,246 @@ component: true
## Installation
The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
<CodeTabs>
See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
<TabsList>
<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">
```bash
npx shadcn@latest add combobox
```
</TabsContent>
<TabsContent value="manual">
<Steps className="mb-0 pt-2">
<Step>Install the following dependencies:</Step>
```bash
npm install @base-ui/react
```
<Step>Copy and paste the following code into your project.</Step>
<ComponentSource
name="combobox"
title="components/ui/combobox.tsx"
styleName="base-nova"
/>
<Step>Update the import paths to match your project setup.</Step>
</Steps>
</TabsContent>
</CodeTabs>
## Usage
<CodeCollapsibleWrapper>
```tsx showLineNumbers title="components/example-combobox.tsx"
"use client"
import * as React from "react"
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
```tsx showLineNumbers
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox"
```
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",
},
]
```tsx showLineNumbers
const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
export function ExampleCombobox() {
const [open, setOpen] = React.useState(false)
const [value, setValue] = React.useState("")
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="w-[200px] justify-between"
>
{value
? frameworks.find((framework) => framework.value === value)?.label
: "Select framework..."}
<ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</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)
}}
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
value === framework.value ? "opacity-100" : "opacity-0"
)}
/>
{framework.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}
```
</CodeCollapsibleWrapper>
## Custom Items
Use `itemToStringValue` when your items are objects.
```tsx showLineNumbers
import * as React from "react"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox"
type Framework = {
label: string
value: string
}
const frameworks: Framework[] = [
{ label: "Next.js", value: "next" },
{ label: "SvelteKit", value: "sveltekit" },
{ label: "Nuxt", value: "nuxt" },
]
export function ExampleComboboxCustomItems() {
return (
<Combobox
items={frameworks}
itemToStringValue={(framework) => framework.label}
>
<ComboboxInput placeholder="Select a framework" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(framework) => (
<ComboboxItem key={framework.value} value={framework}>
{framework.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}
```
## Multiple Selection
Use `multiple` with chips for multi-select behavior.
```tsx showLineNumbers
import * as React from "react"
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
ComboboxValue,
} from "@/components/ui/combobox"
const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
export function ExampleComboboxMultiple() {
const [value, setValue] = React.useState<string[]>([])
return (
<Combobox
items={frameworks}
multiple
value={value}
onValueChange={setValue}
>
<ComboboxChips>
<ComboboxValue>
{value.map((item) => (
<ComboboxChip key={item}>{item}</ComboboxChip>
))}
</ComboboxValue>
<ComboboxChipsInput placeholder="Add framework" />
</ComboboxChips>
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}
```
## Examples
### Combobox
### Basic
<ComponentPreview
styleName="base-nova"
name="combobox-demo"
description="A combobox with a list of frameworks."
/>
A simple combobox with a list of frameworks.
### Popover
<ComponentPreview styleName="base-nova" name="combobox-basic" />
<ComponentPreview styleName="base-nova" name="combobox-popover" />
### Multiple
### Dropdown menu
A combobox with multiple selection using `multiple` and `ComboboxChips`.
<ComponentPreview
styleName="base-nova"
name="combobox-dropdown-menu"
description="A combobox in a dropdown menu"
/>
<ComponentPreview styleName="base-nova" name="combobox-multiple" />
### Responsive
### Clear Button
You can create a responsive combobox by using the `<Popover />` on desktop and the `<Drawer />` components on mobile.
Use the `showClear` prop to show a clear button.
<ComponentPreview styleName="base-nova" name="combobox-responsive" />
<ComponentPreview styleName="base-nova" name="combobox-clear" />
### Groups
Use `ComboboxGroup` and `ComboboxSeparator` to group items.
<ComponentPreview styleName="base-nova" name="combobox-groups" />
### Custom Items
You can render custom component inside `ComboboxItem`.
<ComponentPreview styleName="base-nova" name="combobox-custom" />
### Invalid
Use the `aria-invalid` prop to make the combobox invalid.
<ComponentPreview styleName="base-nova" name="combobox-invalid" />
### Disabled
Use the `disabled` prop to disable the combobox.
<ComponentPreview styleName="base-nova" name="combobox-disabled" />
### Auto Highlight
Use the `autoHighlight` prop automatically highlight the first item on filter.
<ComponentPreview styleName="base-nova" name="combobox-auto-highlight" />
### Popup
You can trigger the combobox from a button or any other component by using the `render` prop. Move the `ComboboxInput` inside the `ComboboxContent`.
<ComponentPreview styleName="base-nova" name="combobox-popup" />
### Input Group
You can add an addon to the combobox by using the `InputGroupAddon` component inside the `ComboboxInput`.
<ComponentPreview styleName="base-nova" name="combobox-input-group" />
## API Reference
See the [Base UI](https://base-ui.com/react/components/combobox#api-reference) documentation for more information.

336
apps/v4/content/docs/components/radix/combobox.mdx
View File

@@ -1,149 +1,261 @@
---
title: Combobox
description: Autocomplete input and command palette with a list of suggestions.
description: Autocomplete input with a list of suggestions.
base: radix
component: true
links:
doc: https://base-ui.com/react/components/combobox
api: https://base-ui.com/react/components/combobox#api-reference
---
<ComponentPreview
styleName="radix-nova"
styleName="base-nova"
name="combobox-demo"
description="A combobox with a list of frameworks."
/>
## Installation
The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
<CodeTabs>
See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
<TabsList>
<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">
```bash
npx shadcn@latest add combobox
```
</TabsContent>
<TabsContent value="manual">
<Steps className="mb-0 pt-2">
<Step>Install the following dependencies:</Step>
```bash
npm install @base-ui/react
```
<Step>Copy and paste the following code into your project.</Step>
<ComponentSource
name="combobox"
title="components/ui/combobox.tsx"
styleName="base-nova"
/>
<Step>Update the import paths to match your project setup.</Step>
</Steps>
</TabsContent>
</CodeTabs>
## Usage
<CodeCollapsibleWrapper>
```tsx showLineNumbers title="components/example-combobox.tsx"
"use client"
import * as React from "react"
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
```tsx showLineNumbers
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox"
```
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",
},
]
```tsx showLineNumbers
const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
export function ExampleCombobox() {
const [open, setOpen] = React.useState(false)
const [value, setValue] = React.useState("")
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="w-[200px] justify-between"
>
{value
? frameworks.find((framework) => framework.value === value)?.label
: "Select framework..."}
<ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</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)
}}
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
value === framework.value ? "opacity-100" : "opacity-0"
)}
/>
{framework.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}
```
</CodeCollapsibleWrapper>
## Custom Items
Use `itemToStringValue` when your items are objects.
```tsx showLineNumbers
import * as React from "react"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox"
type Framework = {
label: string
value: string
}
const frameworks: Framework[] = [
{ label: "Next.js", value: "next" },
{ label: "SvelteKit", value: "sveltekit" },
{ label: "Nuxt", value: "nuxt" },
]
export function ExampleComboboxCustomItems() {
return (
<Combobox
items={frameworks}
itemToStringValue={(framework) => framework.label}
>
<ComboboxInput placeholder="Select a framework" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(framework) => (
<ComboboxItem key={framework.value} value={framework}>
{framework.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}
```
## Multiple Selection
Use `multiple` with chips for multi-select behavior.
```tsx showLineNumbers
import * as React from "react"
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
ComboboxValue,
} from "@/components/ui/combobox"
const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
export function ExampleComboboxMultiple() {
const [value, setValue] = React.useState<string[]>([])
return (
<Combobox
items={frameworks}
multiple
value={value}
onValueChange={setValue}
>
<ComboboxChips>
<ComboboxValue>
{value.map((item) => (
<ComboboxChip key={item}>{item}</ComboboxChip>
))}
</ComboboxValue>
<ComboboxChipsInput placeholder="Add framework" />
</ComboboxChips>
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}
```
## Examples
### Combobox
### Basic
<ComponentPreview
styleName="radix-nova"
name="combobox-demo"
description="A combobox with a list of frameworks."
/>
A simple combobox with a list of frameworks.
### Popover
<ComponentPreview styleName="base-nova" name="combobox-basic" />
<ComponentPreview styleName="radix-nova" name="combobox-popover" />
### Multiple
### Dropdown menu
A combobox with multiple selection using `multiple` and `ComboboxChips`.
<ComponentPreview
styleName="radix-nova"
name="combobox-dropdown-menu"
description="A combobox in a dropdown menu"
/>
<ComponentPreview styleName="base-nova" name="combobox-multiple" />
### Responsive
### Clear Button
You can create a responsive combobox by using the `<Popover />` on desktop and the `<Drawer />` components on mobile.
Use the `showClear` prop to show a clear button.
<ComponentPreview styleName="radix-nova" name="combobox-responsive" />
<ComponentPreview styleName="base-nova" name="combobox-clear" />
### Groups
Use `ComboboxGroup` and `ComboboxSeparator` to group items.
<ComponentPreview styleName="base-nova" name="combobox-groups" />
### Custom Items
You can render custom component inside `ComboboxItem`.
<ComponentPreview styleName="base-nova" name="combobox-custom" />
### Invalid
Use the `aria-invalid` prop to make the combobox invalid.
<ComponentPreview styleName="base-nova" name="combobox-invalid" />
### Disabled
Use the `disabled` prop to disable the combobox.
<ComponentPreview styleName="base-nova" name="combobox-disabled" />
### Auto Highlight
Use the `autoHighlight` prop automatically highlight the first item on filter.
<ComponentPreview styleName="base-nova" name="combobox-auto-highlight" />
### Popup
You can trigger the combobox from a button or any other component by using the `render` prop. Move the `ComboboxInput` inside the `ComboboxContent`.
<ComponentPreview styleName="base-nova" name="combobox-popup" />
### Input Group
You can add an addon to the combobox by using the `InputGroupAddon` component inside the `ComboboxInput`.
<ComponentPreview styleName="base-nova" name="combobox-input-group" />
## API Reference
See the [Base UI](https://base-ui.com/react/components/combobox#api-reference) documentation for more information.

450
apps/v4/examples/__index__.tsx
View File

@@ -1383,6 +1383,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"combobox-clear": {
name: "combobox-clear",
filePath: "examples/radix/combobox-clear.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-clear")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-clear"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-custom": {
name: "combobox-custom",
filePath: "examples/radix/combobox-custom.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-custom")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-custom"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-demo": {
name: "combobox-demo",
filePath: "examples/radix/combobox-demo.tsx",
@@ -1409,42 +1435,29 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"combobox-dropdown-menu": {
name: "combobox-dropdown-menu",
filePath: "examples/radix/combobox-dropdown-menu.tsx",
"combobox-groups": {
name: "combobox-groups",
filePath: "examples/radix/combobox-groups.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-dropdown-menu")
const mod = await import("./radix/combobox-groups")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-dropdown-menu"
) || "combobox-groups"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-in-dialog": {
name: "combobox-in-dialog",
filePath: "examples/radix/combobox-in-dialog.tsx",
"combobox-input-group": {
name: "combobox-input-group",
filePath: "examples/radix/combobox-input-group.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-in-dialog")
const mod = await import("./radix/combobox-input-group")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-in-dialog"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-in-popup": {
name: "combobox-in-popup",
filePath: "examples/radix/combobox-in-popup.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-in-popup")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-in-popup"
) || "combobox-input-group"
return { default: mod.default || mod[exportName] }
}),
},
@@ -1461,58 +1474,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"combobox-large-list": {
name: "combobox-large-list",
filePath: "examples/radix/combobox-large-list.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-large-list")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-large-list"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-multiple-disabled": {
name: "combobox-multiple-disabled",
filePath: "examples/radix/combobox-multiple-disabled.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-multiple-disabled")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-multiple-disabled"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-multiple-invalid": {
name: "combobox-multiple-invalid",
filePath: "examples/radix/combobox-multiple-invalid.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-multiple-invalid")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-multiple-invalid"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-multiple-no-remove": {
name: "combobox-multiple-no-remove",
filePath: "examples/radix/combobox-multiple-no-remove.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-multiple-no-remove")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-multiple-no-remove"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-multiple": {
name: "combobox-multiple",
filePath: "examples/radix/combobox-multiple.tsx",
@@ -1526,120 +1487,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"combobox-popover": {
name: "combobox-popover",
filePath: "examples/radix/combobox-popover.tsx",
"combobox-popup": {
name: "combobox-popup",
filePath: "examples/radix/combobox-popup.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-popover")
const mod = await import("./radix/combobox-popup")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-popover"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-responsive": {
name: "combobox-responsive",
filePath: "examples/radix/combobox-responsive.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-responsive")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-responsive"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-clear": {
name: "combobox-with-clear",
filePath: "examples/radix/combobox-with-clear.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-with-clear")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-clear"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-custom-items": {
name: "combobox-with-custom-items",
filePath: "examples/radix/combobox-with-custom-items.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-with-custom-items")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-custom-items"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-form": {
name: "combobox-with-form",
filePath: "examples/radix/combobox-with-form.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-with-form")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-form"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-groups-and-separator": {
name: "combobox-with-groups-and-separator",
filePath: "examples/radix/combobox-with-groups-and-separator.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-with-groups-and-separator")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-groups-and-separator"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-groups": {
name: "combobox-with-groups",
filePath: "examples/radix/combobox-with-groups.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-with-groups")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-groups"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-other-inputs": {
name: "combobox-with-other-inputs",
filePath: "examples/radix/combobox-with-other-inputs.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/combobox-with-other-inputs")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-other-inputs"
return { default: mod.default || mod[exportName] }
}),
},
"comboxbox-input-addon": {
name: "comboxbox-input-addon",
filePath: "examples/radix/comboxbox-input-addon.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/comboxbox-input-addon")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "comboxbox-input-addon"
) || "combobox-popup"
return { default: mod.default || mod[exportName] }
}),
},
@@ -7991,6 +7848,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"combobox-clear": {
name: "combobox-clear",
filePath: "examples/base/combobox-clear.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-clear")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-clear"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-custom": {
name: "combobox-custom",
filePath: "examples/base/combobox-custom.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-custom")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-custom"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-demo": {
name: "combobox-demo",
filePath: "examples/base/combobox-demo.tsx",
@@ -8017,42 +7900,29 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"combobox-dropdown-menu": {
name: "combobox-dropdown-menu",
filePath: "examples/base/combobox-dropdown-menu.tsx",
"combobox-groups": {
name: "combobox-groups",
filePath: "examples/base/combobox-groups.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-dropdown-menu")
const mod = await import("./base/combobox-groups")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-dropdown-menu"
) || "combobox-groups"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-in-dialog": {
name: "combobox-in-dialog",
filePath: "examples/base/combobox-in-dialog.tsx",
"combobox-input-group": {
name: "combobox-input-group",
filePath: "examples/base/combobox-input-group.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-in-dialog")
const mod = await import("./base/combobox-input-group")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-in-dialog"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-in-popup": {
name: "combobox-in-popup",
filePath: "examples/base/combobox-in-popup.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-in-popup")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-in-popup"
) || "combobox-input-group"
return { default: mod.default || mod[exportName] }
}),
},
@@ -8069,58 +7939,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"combobox-large-list": {
name: "combobox-large-list",
filePath: "examples/base/combobox-large-list.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-large-list")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-large-list"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-multiple-disabled": {
name: "combobox-multiple-disabled",
filePath: "examples/base/combobox-multiple-disabled.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-multiple-disabled")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-multiple-disabled"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-multiple-invalid": {
name: "combobox-multiple-invalid",
filePath: "examples/base/combobox-multiple-invalid.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-multiple-invalid")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-multiple-invalid"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-multiple-no-remove": {
name: "combobox-multiple-no-remove",
filePath: "examples/base/combobox-multiple-no-remove.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-multiple-no-remove")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-multiple-no-remove"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-multiple": {
name: "combobox-multiple",
filePath: "examples/base/combobox-multiple.tsx",
@@ -8134,120 +7952,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"combobox-popover": {
name: "combobox-popover",
filePath: "examples/base/combobox-popover.tsx",
"combobox-popup": {
name: "combobox-popup",
filePath: "examples/base/combobox-popup.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-popover")
const mod = await import("./base/combobox-popup")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-popover"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-responsive": {
name: "combobox-responsive",
filePath: "examples/base/combobox-responsive.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-responsive")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-responsive"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-clear": {
name: "combobox-with-clear",
filePath: "examples/base/combobox-with-clear.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-with-clear")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-clear"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-custom-items": {
name: "combobox-with-custom-items",
filePath: "examples/base/combobox-with-custom-items.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-with-custom-items")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-custom-items"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-form": {
name: "combobox-with-form",
filePath: "examples/base/combobox-with-form.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-with-form")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-form"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-groups-and-separator": {
name: "combobox-with-groups-and-separator",
filePath: "examples/base/combobox-with-groups-and-separator.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-with-groups-and-separator")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-groups-and-separator"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-groups": {
name: "combobox-with-groups",
filePath: "examples/base/combobox-with-groups.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-with-groups")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-groups"
return { default: mod.default || mod[exportName] }
}),
},
"combobox-with-other-inputs": {
name: "combobox-with-other-inputs",
filePath: "examples/base/combobox-with-other-inputs.tsx",
component: React.lazy(async () => {
const mod = await import("./base/combobox-with-other-inputs")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "combobox-with-other-inputs"
return { default: mod.default || mod[exportName] }
}),
},
"comboxbox-input-addon": {
name: "comboxbox-input-addon",
filePath: "examples/base/comboxbox-input-addon.tsx",
component: React.lazy(async () => {
const mod = await import("./base/comboxbox-input-addon")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "comboxbox-input-addon"
) || "combobox-popup"
return { default: mod.default || mod[exportName] }
}),
},

38
apps/v4/examples/base/combobox-auto-highlight.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxContent,
@@ -6,7 +8,6 @@ import {
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
import { Select } from "@/examples/base/ui/select"
const frameworks = [
"Next.js",
@@ -16,41 +17,6 @@ const frameworks = [
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxAutoHighlight() {
return (
<Combobox items={frameworks} autoHighlight>

40
apps/v4/examples/base/combobox-basic.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxContent,
@@ -6,7 +8,6 @@ import {
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
import { Select } from "@/examples/base/ui/select"
const frameworks = [
"Next.js",
@@ -16,42 +17,7 @@ const frameworks = [
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxBasic() {
export default function ComboboxBasic() {
return (
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" />

39
apps/v4/examples/base/combobox-with-clear.tsx → apps/v4/examples/base/combobox-clear.tsx
View File

@@ -1,4 +1,5 @@
import { Button } from "@/examples/base/ui/button"
"use client"
import {
Combobox,
ComboboxContent,
@@ -7,7 +8,6 @@ import {
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
import { Select } from "@/examples/base/ui/select"
const frameworks = [
"Next.js",
@@ -17,41 +17,6 @@ const frameworks = [
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxWithClear() {
return (
<Combobox items={frameworks} defaultValue={frameworks[0]}>

99
apps/v4/examples/base/combobox-custom.tsx Normal file
View File

@@ -0,0 +1,99 @@
"use client"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
import {
Item,
ItemContent,
ItemDescription,
ItemTitle,
} from "@/examples/base/ui/item"
const countries = [
{ code: "", value: "", continent: "", label: "Select country" },
{
code: "ar",
value: "argentina",
label: "Argentina",
continent: "South America",
},
{ code: "au", value: "australia", label: "Australia", continent: "Oceania" },
{ code: "br", value: "brazil", label: "Brazil", continent: "South America" },
{ code: "ca", value: "canada", label: "Canada", continent: "North America" },
{ code: "cn", value: "china", label: "China", continent: "Asia" },
{
code: "co",
value: "colombia",
label: "Colombia",
continent: "South America",
},
{ code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
{ code: "fr", value: "france", label: "France", continent: "Europe" },
{ code: "de", value: "germany", label: "Germany", continent: "Europe" },
{ code: "it", value: "italy", label: "Italy", continent: "Europe" },
{ code: "jp", value: "japan", label: "Japan", continent: "Asia" },
{ code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
{ code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
{
code: "nz",
value: "new-zealand",
label: "New Zealand",
continent: "Oceania",
},
{ code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
{
code: "za",
value: "south-africa",
label: "South Africa",
continent: "Africa",
},
{ code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
{
code: "gb",
value: "united-kingdom",
label: "United Kingdom",
continent: "Europe",
},
{
code: "us",
value: "united-states",
label: "United States",
continent: "North America",
},
]
export function ComboboxWithCustomItems() {
return (
<Combobox
items={countries.filter((country) => country.code !== "")}
itemToStringValue={(country: (typeof countries)[number]) => country.label}
>
<ComboboxInput placeholder="Search countries..." />
<ComboboxContent>
<ComboboxEmpty>No countries found.</ComboboxEmpty>
<ComboboxList>
{(country) => (
<ComboboxItem key={country.code} value={country}>
<Item size="xs" className="p-0">
<ItemContent>
<ItemTitle className="whitespace-nowrap">
{country.label}
</ItemTitle>
<ItemDescription>
{country.continent} ({country.code})
</ItemDescription>
</ItemContent>
</Item>
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

114
apps/v4/examples/base/combobox-demo.tsx
View File

@@ -1,96 +1,36 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/examples/base/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/examples/base/ui/popover"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/lib/utils"
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
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 default function ComboboxDemo() {
const [open, setOpen] = React.useState(false)
const [value, setValue] = React.useState("")
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
export default function ComboboxBasic() {
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger
render={
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="w-[200px] justify-between"
/>
}
>
{value
? frameworks.find((framework) => framework.value === value)?.label
: "Select framework..."}
<ChevronsUpDown className="opacity-50" />
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder="Search framework..." className="h-9" />
<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)
}}
>
{framework.label}
<Check
className={cn(
"ml-auto",
value === framework.value ? "opacity-100" : "opacity-0"
)}
/>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

38
apps/v4/examples/base/combobox-disabled.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxContent,
@@ -6,7 +8,6 @@ import {
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
import { Select } from "@/examples/base/ui/select"
const frameworks = [
"Next.js",
@@ -16,41 +17,6 @@ const frameworks = [
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxDisabled() {
return (
<Combobox items={frameworks}>

99
apps/v4/examples/base/combobox-dropdown-menu.tsx
View File

@@ -1,99 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/examples/base/ui/command"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { MoreHorizontal } from "lucide-react"
const labels = [
"feature",
"bug",
"enhancement",
"documentation",
"design",
"question",
"maintenance",
]
export default function ComboboxDropdownMenu() {
const [label, setLabel] = React.useState("feature")
const [open, setOpen] = React.useState(false)
return (
<div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
<p className="text-sm leading-none font-medium">
<span className="bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs">
{label}
</span>
<span className="text-muted-foreground">Create a new project</span>
</p>
<DropdownMenu open={open} onOpenChange={setOpen}>
<DropdownMenuTrigger render={<Button variant="ghost" size="sm" />}>
<MoreHorizontal />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[200px]">
<DropdownMenuGroup>
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem>Assign to...</DropdownMenuItem>
<DropdownMenuItem>Set due date...</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="p-0">
<Command>
<CommandInput
placeholder="Filter label..."
autoFocus={true}
className="h-9"
/>
<CommandList>
<CommandEmpty>No label found.</CommandEmpty>
<CommandGroup>
{labels.map((label) => (
<CommandItem
key={label}
value={label}
onSelect={(value) => {
setLabel(value)
setOpen(false)
}}
>
{label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-red-600">
Delete
<DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
)
}

11
apps/v4/examples/radix/combobox-with-groups.tsx → apps/v4/examples/base/combobox-groups.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxCollection,
@@ -8,8 +10,8 @@ import {
ComboboxItem,
ComboboxLabel,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import { Select } from "@/examples/radix/ui/select"
ComboboxSeparator,
} from "@/examples/base/ui/combobox"
const timezones = [
{
@@ -47,14 +49,14 @@ const timezones = [
},
] as const
export function ComboboxWithGroups() {
export function ComboboxWithGroupsAndSeparator() {
return (
<Combobox items={timezones}>
<ComboboxInput placeholder="Select a timezone" />
<ComboboxContent>
<ComboboxEmpty>No timezones found.</ComboboxEmpty>
<ComboboxList>
{(group) => (
{(group, index) => (
<ComboboxGroup key={group.value} items={group.items}>
<ComboboxLabel>{group.value}</ComboboxLabel>
<ComboboxCollection>
@@ -64,6 +66,7 @@ export function ComboboxWithGroups() {
</ComboboxItem>
)}
</ComboboxCollection>
{index < timezones.length - 1 && <ComboboxSeparator />}
</ComboboxGroup>
)}
</ComboboxList>

128
apps/v4/examples/base/combobox-in-dialog.tsx
View File

@@ -1,128 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/examples/base/ui/dialog"
import { Field, FieldLabel } from "@/examples/base/ui/field"
import { Select } from "@/examples/base/ui/select"
import { toast } from "sonner"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxInDialog() {
const [open, setOpen] = React.useState(false)
return (
<>
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger render={<Button variant="outline" />}>
Open Dialog
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Select Framework</DialogTitle>
<DialogDescription>
Choose your preferred framework from the list below.
</DialogDescription>
</DialogHeader>
<Field>
<FieldLabel htmlFor="framework-dialog" className="sr-only">
Framework
</FieldLabel>
<Combobox items={frameworks}>
<ComboboxInput
id="framework-dialog"
placeholder="Select a framework"
/>
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
</Field>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => setOpen(false)}
>
Cancel
</Button>
<Button
type="button"
onClick={() => {
toast("Framework selected.")
setOpen(false)
}}
>
Confirm
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
)
}

488
apps/v4/examples/base/combobox-in-popup.tsx
View File

@@ -1,488 +0,0 @@
import { Button } from "@/examples/base/ui/button"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
ComboboxTrigger,
ComboboxValue,
} from "@/examples/base/ui/combobox"
import { Select } from "@/examples/base/ui/select"
const countries = [
{ code: "", value: "", continent: "", label: "Select country" },
{ code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
{ code: "al", value: "albania", label: "Albania", continent: "Europe" },
{ code: "dz", value: "algeria", label: "Algeria", continent: "Africa" },
{ code: "ad", value: "andorra", label: "Andorra", continent: "Europe" },
{ code: "ao", value: "angola", label: "Angola", continent: "Africa" },
{
code: "ar",
value: "argentina",
label: "Argentina",
continent: "South America",
},
{ code: "am", value: "armenia", label: "Armenia", continent: "Asia" },
{ code: "au", value: "australia", label: "Australia", continent: "Oceania" },
{ code: "at", value: "austria", label: "Austria", continent: "Europe" },
{ code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" },
{
code: "bs",
value: "bahamas",
label: "Bahamas",
continent: "North America",
},
{ code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" },
{ code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" },
{
code: "bb",
value: "barbados",
label: "Barbados",
continent: "North America",
},
{ code: "by", value: "belarus", label: "Belarus", continent: "Europe" },
{ code: "be", value: "belgium", label: "Belgium", continent: "Europe" },
{ code: "bz", value: "belize", label: "Belize", continent: "North America" },
{ code: "bj", value: "benin", label: "Benin", continent: "Africa" },
{ code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" },
{
code: "bo",
value: "bolivia",
label: "Bolivia",
continent: "South America",
},
{
code: "ba",
value: "bosnia-and-herzegovina",
label: "Bosnia and Herzegovina",
continent: "Europe",
},
{ code: "bw", value: "botswana", label: "Botswana", continent: "Africa" },
{ code: "br", value: "brazil", label: "Brazil", continent: "South America" },
{ code: "bn", value: "brunei", label: "Brunei", continent: "Asia" },
{ code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" },
{
code: "bf",
value: "burkina-faso",
label: "Burkina Faso",
continent: "Africa",
},
{ code: "bi", value: "burundi", label: "Burundi", continent: "Africa" },
{ code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" },
{ code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" },
{ code: "ca", value: "canada", label: "Canada", continent: "North America" },
{ code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" },
{
code: "cf",
value: "central-african-republic",
label: "Central African Republic",
continent: "Africa",
},
{ code: "td", value: "chad", label: "Chad", continent: "Africa" },
{ code: "cl", value: "chile", label: "Chile", continent: "South America" },
{ code: "cn", value: "china", label: "China", continent: "Asia" },
{
code: "co",
value: "colombia",
label: "Colombia",
continent: "South America",
},
{ code: "km", value: "comoros", label: "Comoros", continent: "Africa" },
{ code: "cg", value: "congo", label: "Congo", continent: "Africa" },
{
code: "cr",
value: "costa-rica",
label: "Costa Rica",
continent: "North America",
},
{ code: "hr", value: "croatia", label: "Croatia", continent: "Europe" },
{ code: "cu", value: "cuba", label: "Cuba", continent: "North America" },
{ code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" },
{
code: "cz",
value: "czech-republic",
label: "Czech Republic",
continent: "Europe",
},
{ code: "dk", value: "denmark", label: "Denmark", continent: "Europe" },
{ code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" },
{
code: "dm",
value: "dominica",
label: "Dominica",
continent: "North America",
},
{
code: "do",
value: "dominican-republic",
label: "Dominican Republic",
continent: "North America",
},
{
code: "ec",
value: "ecuador",
label: "Ecuador",
continent: "South America",
},
{ code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
{
code: "sv",
value: "el-salvador",
label: "El Salvador",
continent: "North America",
},
{
code: "gq",
value: "equatorial-guinea",
label: "Equatorial Guinea",
continent: "Africa",
},
{ code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" },
{ code: "ee", value: "estonia", label: "Estonia", continent: "Europe" },
{ code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" },
{ code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" },
{ code: "fi", value: "finland", label: "Finland", continent: "Europe" },
{ code: "fr", value: "france", label: "France", continent: "Europe" },
{ code: "ga", value: "gabon", label: "Gabon", continent: "Africa" },
{ code: "gm", value: "gambia", label: "Gambia", continent: "Africa" },
{ code: "ge", value: "georgia", label: "Georgia", continent: "Asia" },
{ code: "de", value: "germany", label: "Germany", continent: "Europe" },
{ code: "gh", value: "ghana", label: "Ghana", continent: "Africa" },
{ code: "gr", value: "greece", label: "Greece", continent: "Europe" },
{
code: "gd",
value: "grenada",
label: "Grenada",
continent: "North America",
},
{
code: "gt",
value: "guatemala",
label: "Guatemala",
continent: "North America",
},
{ code: "gn", value: "guinea", label: "Guinea", continent: "Africa" },
{
code: "gw",
value: "guinea-bissau",
label: "Guinea-Bissau",
continent: "Africa",
},
{ code: "gy", value: "guyana", label: "Guyana", continent: "South America" },
{ code: "ht", value: "haiti", label: "Haiti", continent: "North America" },
{
code: "hn",
value: "honduras",
label: "Honduras",
continent: "North America",
},
{ code: "hu", value: "hungary", label: "Hungary", continent: "Europe" },
{ code: "is", value: "iceland", label: "Iceland", continent: "Europe" },
{ code: "in", value: "india", label: "India", continent: "Asia" },
{ code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" },
{ code: "ir", value: "iran", label: "Iran", continent: "Asia" },
{ code: "iq", value: "iraq", label: "Iraq", continent: "Asia" },
{ code: "ie", value: "ireland", label: "Ireland", continent: "Europe" },
{ code: "il", value: "israel", label: "Israel", continent: "Asia" },
{ code: "it", value: "italy", label: "Italy", continent: "Europe" },
{
code: "jm",
value: "jamaica",
label: "Jamaica",
continent: "North America",
},
{ code: "jp", value: "japan", label: "Japan", continent: "Asia" },
{ code: "jo", value: "jordan", label: "Jordan", continent: "Asia" },
{ code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" },
{ code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
{ code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" },
{ code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" },
{ code: "la", value: "laos", label: "Laos", continent: "Asia" },
{ code: "lv", value: "latvia", label: "Latvia", continent: "Europe" },
{ code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" },
{ code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" },
{ code: "lr", value: "liberia", label: "Liberia", continent: "Africa" },
{ code: "ly", value: "libya", label: "Libya", continent: "Africa" },
{
code: "li",
value: "liechtenstein",
label: "Liechtenstein",
continent: "Europe",
},
{ code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" },
{ code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" },
{ code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" },
{ code: "mw", value: "malawi", label: "Malawi", continent: "Africa" },
{ code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" },
{ code: "mv", value: "maldives", label: "Maldives", continent: "Asia" },
{ code: "ml", value: "mali", label: "Mali", continent: "Africa" },
{ code: "mt", value: "malta", label: "Malta", continent: "Europe" },
{
code: "mh",
value: "marshall-islands",
label: "Marshall Islands",
continent: "Oceania",
},
{ code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" },
{ code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" },
{ code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
{
code: "fm",
value: "micronesia",
label: "Micronesia",
continent: "Oceania",
},
{ code: "md", value: "moldova", label: "Moldova", continent: "Europe" },
{ code: "mc", value: "monaco", label: "Monaco", continent: "Europe" },
{ code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" },
{ code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" },
{ code: "ma", value: "morocco", label: "Morocco", continent: "Africa" },
{ code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" },
{ code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" },
{ code: "na", value: "namibia", label: "Namibia", continent: "Africa" },
{ code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" },
{ code: "np", value: "nepal", label: "Nepal", continent: "Asia" },
{
code: "nl",
value: "netherlands",
label: "Netherlands",
continent: "Europe",
},
{
code: "nz",
value: "new-zealand",
label: "New Zealand",
continent: "Oceania",
},
{
code: "ni",
value: "nicaragua",
label: "Nicaragua",
continent: "North America",
},
{ code: "ne", value: "niger", label: "Niger", continent: "Africa" },
{ code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
{ code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" },
{
code: "mk",
value: "north-macedonia",
label: "North Macedonia",
continent: "Europe",
},
{ code: "no", value: "norway", label: "Norway", continent: "Europe" },
{ code: "om", value: "oman", label: "Oman", continent: "Asia" },
{ code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" },
{ code: "pw", value: "palau", label: "Palau", continent: "Oceania" },
{ code: "ps", value: "palestine", label: "Palestine", continent: "Asia" },
{ code: "pa", value: "panama", label: "Panama", continent: "North America" },
{
code: "pg",
value: "papua-new-guinea",
label: "Papua New Guinea",
continent: "Oceania",
},
{
code: "py",
value: "paraguay",
label: "Paraguay",
continent: "South America",
},
{ code: "pe", value: "peru", label: "Peru", continent: "South America" },
{ code: "ph", value: "philippines", label: "Philippines", continent: "Asia" },
{ code: "pl", value: "poland", label: "Poland", continent: "Europe" },
{ code: "pt", value: "portugal", label: "Portugal", continent: "Europe" },
{ code: "qa", value: "qatar", label: "Qatar", continent: "Asia" },
{ code: "ro", value: "romania", label: "Romania", continent: "Europe" },
{ code: "ru", value: "russia", label: "Russia", continent: "Europe" },
{ code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" },
{ code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" },
{ code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" },
{
code: "sa",
value: "saudi-arabia",
label: "Saudi Arabia",
continent: "Asia",
},
{ code: "sn", value: "senegal", label: "Senegal", continent: "Africa" },
{ code: "rs", value: "serbia", label: "Serbia", continent: "Europe" },
{ code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" },
{
code: "sl",
value: "sierra-leone",
label: "Sierra Leone",
continent: "Africa",
},
{ code: "sg", value: "singapore", label: "Singapore", continent: "Asia" },
{ code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" },
{ code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" },
{
code: "sb",
value: "solomon-islands",
label: "Solomon Islands",
continent: "Oceania",
},
{ code: "so", value: "somalia", label: "Somalia", continent: "Africa" },
{
code: "za",
value: "south-africa",
label: "South Africa",
continent: "Africa",
},
{ code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
{
code: "ss",
value: "south-sudan",
label: "South Sudan",
continent: "Africa",
},
{ code: "es", value: "spain", label: "Spain", continent: "Europe" },
{ code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" },
{ code: "sd", value: "sudan", label: "Sudan", continent: "Africa" },
{
code: "sr",
value: "suriname",
label: "Suriname",
continent: "South America",
},
{ code: "se", value: "sweden", label: "Sweden", continent: "Europe" },
{
code: "ch",
value: "switzerland",
label: "Switzerland",
continent: "Europe",
},
{ code: "sy", value: "syria", label: "Syria", continent: "Asia" },
{ code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" },
{ code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" },
{ code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" },
{ code: "th", value: "thailand", label: "Thailand", continent: "Asia" },
{ code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" },
{ code: "tg", value: "togo", label: "Togo", continent: "Africa" },
{ code: "to", value: "tonga", label: "Tonga", continent: "Oceania" },
{
code: "tt",
value: "trinidad-and-tobago",
label: "Trinidad and Tobago",
continent: "North America",
},
{ code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" },
{ code: "tr", value: "turkey", label: "Turkey", continent: "Asia" },
{
code: "tm",
value: "turkmenistan",
label: "Turkmenistan",
continent: "Asia",
},
{ code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" },
{ code: "ug", value: "uganda", label: "Uganda", continent: "Africa" },
{ code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" },
{
code: "ae",
value: "united-arab-emirates",
label: "United Arab Emirates",
continent: "Asia",
},
{
code: "gb",
value: "united-kingdom",
label: "United Kingdom",
continent: "Europe",
},
{
code: "us",
value: "united-states",
label: "United States",
continent: "North America",
},
{
code: "uy",
value: "uruguay",
label: "Uruguay",
continent: "South America",
},
{ code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" },
{ code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" },
{
code: "va",
value: "vatican-city",
label: "Vatican City",
continent: "Europe",
},
{
code: "ve",
value: "venezuela",
label: "Venezuela",
continent: "South America",
},
{ code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" },
{ code: "ye", value: "yemen", label: "Yemen", continent: "Asia" },
{ code: "zm", value: "zambia", label: "Zambia", continent: "Africa" },
{ code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" },
]
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxInPopup() {
return (
<>
<Combobox items={countries} defaultValue={countries[0]}>
<ComboboxTrigger
render={
<Button
variant="outline"
className="w-64 justify-between font-normal"
/>
}
>
<ComboboxValue />
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput showTrigger={false} placeholder="Search" />
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item.code} value={item}>
{item.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
</>
)
}

43
apps/v4/examples/base/comboxbox-input-addon.tsx → apps/v4/examples/base/combobox-input-group.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxCollection,
@@ -9,9 +11,7 @@ import {
ComboboxLabel,
ComboboxList,
} from "@/examples/base/ui/combobox"
import { Input } from "@/examples/base/ui/input"
import { InputGroup, InputGroupAddon } from "@/examples/base/ui/input-group"
import { Select } from "@/examples/base/ui/select"
import { InputGroupAddon } from "@/examples/base/ui/input-group"
import { GlobeIcon } from "lucide-react"
const timezones = [
@@ -50,42 +50,7 @@ const timezones = [
},
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboxboxInputAddon() {
export function ComboxboxInputGroup() {
return (
<Combobox items={timezones}>
<ComboboxInput placeholder="Select a timezone">

94
apps/v4/examples/base/combobox-invalid.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxContent,
@@ -6,13 +8,6 @@ import {
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from "@/examples/base/ui/field"
import { Select } from "@/examples/base/ui/select"
const frameworks = [
"Next.js",
@@ -22,79 +17,20 @@ const frameworks = [
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxInvalid() {
return (
<div className="flex flex-col gap-4">
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" aria-invalid="true" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
<Field data-invalid>
<FieldLabel htmlFor="combobox-framework-invalid">Framework</FieldLabel>
<Combobox items={frameworks}>
<ComboboxInput
id="combobox-framework-invalid"
placeholder="Select a framework"
aria-invalid
/>
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
<FieldDescription>Please select a valid framework.</FieldDescription>
<FieldError errors={[{ message: "This field is required." }]} />
</Field>
</div>
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" aria-invalid="true" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

65
apps/v4/examples/base/combobox-large-list.tsx
View File

@@ -1,65 +0,0 @@
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
import { Item } from "@/examples/base/ui/item"
import { Select } from "@/examples/base/ui/select"
const largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxLargeList() {
return (
<Combobox items={largeListItems}>
<ComboboxInput placeholder="Search from 100 items" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

94
apps/v4/examples/base/combobox-multiple-disabled.tsx
View File

@@ -1,94 +0,0 @@
import * as React from "react"
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxContent,
ComboboxEmpty,
ComboboxItem,
ComboboxList,
ComboboxValue,
useComboboxAnchor,
} from "@/examples/base/ui/combobox"
import { Select } from "@/examples/base/ui/select"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxMultipleDisabled() {
const anchor = useComboboxAnchor()
return (
<Combobox
multiple
autoHighlight
items={frameworks}
defaultValue={[frameworks[0], frameworks[1]]}
disabled
>
<ComboboxChips ref={anchor}>
<ComboboxValue>
{(values) => (
<React.Fragment>
{values.map((value: string) => (
<ComboboxChip key={value}>{value}</ComboboxChip>
))}
<ComboboxChipsInput disabled />
</React.Fragment>
)}
</ComboboxValue>
</ComboboxChips>
<ComboboxContent anchor={anchor}>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

141
apps/v4/examples/base/combobox-multiple-invalid.tsx
View File

@@ -1,141 +0,0 @@
import * as React from "react"
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxContent,
ComboboxEmpty,
ComboboxItem,
ComboboxList,
ComboboxValue,
useComboboxAnchor,
} from "@/examples/base/ui/combobox"
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from "@/examples/base/ui/field"
import { Select } from "@/examples/base/ui/select"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxMultipleInvalid() {
const anchor1 = useComboboxAnchor()
const anchor2 = useComboboxAnchor()
return (
<div className="flex flex-col gap-4">
<Combobox
multiple
autoHighlight
items={frameworks}
defaultValue={[frameworks[0], frameworks[1]]}
>
<ComboboxChips ref={anchor1}>
<ComboboxValue>
{(values) => (
<React.Fragment>
{values.map((value: string) => (
<ComboboxChip key={value}>{value}</ComboboxChip>
))}
<ComboboxChipsInput aria-invalid="true" />
</React.Fragment>
)}
</ComboboxValue>
</ComboboxChips>
<ComboboxContent anchor={anchor1}>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
<Field data-invalid>
<FieldLabel htmlFor="combobox-multiple-invalid">Frameworks</FieldLabel>
<Combobox
multiple
autoHighlight
items={frameworks}
defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}
>
<ComboboxChips ref={anchor2}>
<ComboboxValue>
{(values) => (
<React.Fragment>
{values.map((value: string) => (
<ComboboxChip key={value}>{value}</ComboboxChip>
))}
<ComboboxChipsInput
id="combobox-multiple-invalid"
aria-invalid
/>
</React.Fragment>
)}
</ComboboxValue>
</ComboboxChips>
<ComboboxContent anchor={anchor2}>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
<FieldDescription>
Please select at least one framework.
</FieldDescription>
<FieldError errors={[{ message: "This field is required." }]} />
</Field>
</div>
)
}

95
apps/v4/examples/base/combobox-multiple-no-remove.tsx
View File

@@ -1,95 +0,0 @@
import * as React from "react"
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxContent,
ComboboxEmpty,
ComboboxItem,
ComboboxList,
ComboboxValue,
useComboboxAnchor,
} from "@/examples/base/ui/combobox"
import { Select } from "@/examples/base/ui/select"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxMultipleNoRemove() {
const anchor = useComboboxAnchor()
return (
<Combobox
multiple
autoHighlight
items={frameworks}
defaultValue={[frameworks[0], frameworks[1]]}
>
<ComboboxChips ref={anchor}>
<ComboboxValue>
{(values) => (
<React.Fragment>
{values.map((value: string) => (
<ComboboxChip key={value} showRemove={false}>
{value}
</ComboboxChip>
))}
<ComboboxChipsInput />
</React.Fragment>
)}
</ComboboxValue>
</ComboboxChips>
<ComboboxContent anchor={anchor}>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

40
apps/v4/examples/base/combobox-multiple.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import * as React from "react"
import {
Combobox,
@@ -11,7 +13,6 @@ import {
ComboboxValue,
useComboboxAnchor,
} from "@/examples/base/ui/combobox"
import { Select } from "@/examples/base/ui/select"
const frameworks = [
"Next.js",
@@ -21,41 +22,6 @@ const frameworks = [
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxMultiple() {
const anchor = useComboboxAnchor()
@@ -66,7 +32,7 @@ export function ComboboxMultiple() {
items={frameworks}
defaultValue={[frameworks[0]]}
>
<ComboboxChips ref={anchor}>
<ComboboxChips ref={anchor} className="w-full max-w-xs">
<ComboboxValue>
{(values) => (
<React.Fragment>

92
apps/v4/examples/base/combobox-popover.tsx
View File

@@ -1,92 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/examples/base/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/examples/base/ui/popover"
type Status = {
value: string
label: string
}
const statuses: Status[] = [
{
value: "backlog",
label: "Backlog",
},
{
value: "todo",
label: "Todo",
},
{
value: "in progress",
label: "In Progress",
},
{
value: "done",
label: "Done",
},
{
value: "canceled",
label: "Canceled",
},
]
export default function ComboboxPopover() {
const [open, setOpen] = React.useState(false)
const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
null
)
return (
<div className="flex items-center space-x-4">
<p className="text-muted-foreground text-sm">Status</p>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger
render={
<Button variant="outline" className="w-[150px] justify-start" />
}
>
{selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
</PopoverTrigger>
<PopoverContent className="p-0" side="right" align="start">
<Command>
<CommandInput placeholder="Change status..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
{statuses.map((status) => (
<CommandItem
key={status.value}
value={status.value}
onSelect={(value) => {
setSelectedStatus(
statuses.find((priority) => priority.value === value) ||
null
)
setOpen(false)
}}
>
{status.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
)
}

96
apps/v4/examples/base/combobox-popup.tsx Normal file
View File

@@ -0,0 +1,96 @@
"use client"
import { Button } from "@/examples/base/ui/button"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
ComboboxTrigger,
ComboboxValue,
} from "@/examples/base/ui/combobox"
const countries = [
{ code: "", value: "", continent: "", label: "Select country" },
{
code: "ar",
value: "argentina",
label: "Argentina",
continent: "South America",
},
{ code: "au", value: "australia", label: "Australia", continent: "Oceania" },
{ code: "br", value: "brazil", label: "Brazil", continent: "South America" },
{ code: "ca", value: "canada", label: "Canada", continent: "North America" },
{ code: "cn", value: "china", label: "China", continent: "Asia" },
{
code: "co",
value: "colombia",
label: "Colombia",
continent: "South America",
},
{ code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
{ code: "fr", value: "france", label: "France", continent: "Europe" },
{ code: "de", value: "germany", label: "Germany", continent: "Europe" },
{ code: "it", value: "italy", label: "Italy", continent: "Europe" },
{ code: "jp", value: "japan", label: "Japan", continent: "Asia" },
{ code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
{ code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
{
code: "nz",
value: "new-zealand",
label: "New Zealand",
continent: "Oceania",
},
{ code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
{
code: "za",
value: "south-africa",
label: "South Africa",
continent: "Africa",
},
{ code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
{
code: "gb",
value: "united-kingdom",
label: "United Kingdom",
continent: "Europe",
},
{
code: "us",
value: "united-states",
label: "United States",
continent: "North America",
},
]
export function ComboboxPopup() {
return (
<>
<Combobox items={countries} defaultValue={countries[0]}>
<ComboboxTrigger
render={
<Button
variant="outline"
className="w-64 justify-between font-normal"
/>
}
>
<ComboboxValue />
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput showTrigger={false} placeholder="Search" />
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item.code} value={item}>
{item.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
</>
)
}

121
apps/v4/examples/base/combobox-responsive.tsx
View File

@@ -1,121 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/examples/base/ui/command"
import { Drawer, DrawerContent, DrawerTrigger } from "@/examples/base/ui/drawer"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/examples/base/ui/popover"
import { useMediaQuery } from "@/hooks/use-media-query"
type Status = {
value: string
label: string
}
const statuses: Status[] = [
{
value: "backlog",
label: "Backlog",
},
{
value: "todo",
label: "Todo",
},
{
value: "in progress",
label: "In Progress",
},
{
value: "done",
label: "Done",
},
{
value: "canceled",
label: "Canceled",
},
]
export default function ComboBoxResponsive() {
const [open, setOpen] = React.useState(false)
const isDesktop = useMediaQuery("(min-width: 768px)")
const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
null
)
if (isDesktop) {
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger
render={
<Button variant="outline" className="w-[150px] justify-start" />
}
>
{selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0" align="start">
<StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
</PopoverContent>
</Popover>
)
}
return (
<Drawer open={open} onOpenChange={setOpen}>
<DrawerTrigger asChild>
<Button variant="outline" className="w-[150px] justify-start">
{selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
</Button>
</DrawerTrigger>
<DrawerContent>
<div className="mt-4 border-t">
<StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
</div>
</DrawerContent>
</Drawer>
)
}
function StatusList({
setOpen,
setSelectedStatus,
}: {
setOpen: (open: boolean) => void
setSelectedStatus: (status: Status | null) => void
}) {
return (
<Command>
<CommandInput placeholder="Filter status..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
{statuses.map((status) => (
<CommandItem
key={status.value}
value={status.value}
onSelect={(value) => {
setSelectedStatus(
statuses.find((priority) => priority.value === value) || null
)
setOpen(false)
}}
>
{status.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
)
}

491
apps/v4/examples/base/combobox-with-custom-items.tsx
View File

@@ -1,491 +0,0 @@
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
import {
Item,
ItemContent,
ItemDescription,
ItemTitle,
} from "@/examples/base/ui/item"
import { Select } from "@/examples/base/ui/select"
const countries = [
{ code: "", value: "", continent: "", label: "Select country" },
{ code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
{ code: "al", value: "albania", label: "Albania", continent: "Europe" },
{ code: "dz", value: "algeria", label: "Algeria", continent: "Africa" },
{ code: "ad", value: "andorra", label: "Andorra", continent: "Europe" },
{ code: "ao", value: "angola", label: "Angola", continent: "Africa" },
{
code: "ar",
value: "argentina",
label: "Argentina",
continent: "South America",
},
{ code: "am", value: "armenia", label: "Armenia", continent: "Asia" },
{ code: "au", value: "australia", label: "Australia", continent: "Oceania" },
{ code: "at", value: "austria", label: "Austria", continent: "Europe" },
{ code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" },
{
code: "bs",
value: "bahamas",
label: "Bahamas",
continent: "North America",
},
{ code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" },
{ code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" },
{
code: "bb",
value: "barbados",
label: "Barbados",
continent: "North America",
},
{ code: "by", value: "belarus", label: "Belarus", continent: "Europe" },
{ code: "be", value: "belgium", label: "Belgium", continent: "Europe" },
{ code: "bz", value: "belize", label: "Belize", continent: "North America" },
{ code: "bj", value: "benin", label: "Benin", continent: "Africa" },
{ code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" },
{
code: "bo",
value: "bolivia",
label: "Bolivia",
continent: "South America",
},
{
code: "ba",
value: "bosnia-and-herzegovina",
label: "Bosnia and Herzegovina",
continent: "Europe",
},
{ code: "bw", value: "botswana", label: "Botswana", continent: "Africa" },
{ code: "br", value: "brazil", label: "Brazil", continent: "South America" },
{ code: "bn", value: "brunei", label: "Brunei", continent: "Asia" },
{ code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" },
{
code: "bf",
value: "burkina-faso",
label: "Burkina Faso",
continent: "Africa",
},
{ code: "bi", value: "burundi", label: "Burundi", continent: "Africa" },
{ code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" },
{ code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" },
{ code: "ca", value: "canada", label: "Canada", continent: "North America" },
{ code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" },
{
code: "cf",
value: "central-african-republic",
label: "Central African Republic",
continent: "Africa",
},
{ code: "td", value: "chad", label: "Chad", continent: "Africa" },
{ code: "cl", value: "chile", label: "Chile", continent: "South America" },
{ code: "cn", value: "china", label: "China", continent: "Asia" },
{
code: "co",
value: "colombia",
label: "Colombia",
continent: "South America",
},
{ code: "km", value: "comoros", label: "Comoros", continent: "Africa" },
{ code: "cg", value: "congo", label: "Congo", continent: "Africa" },
{
code: "cr",
value: "costa-rica",
label: "Costa Rica",
continent: "North America",
},
{ code: "hr", value: "croatia", label: "Croatia", continent: "Europe" },
{ code: "cu", value: "cuba", label: "Cuba", continent: "North America" },
{ code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" },
{
code: "cz",
value: "czech-republic",
label: "Czech Republic",
continent: "Europe",
},
{ code: "dk", value: "denmark", label: "Denmark", continent: "Europe" },
{ code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" },
{
code: "dm",
value: "dominica",
label: "Dominica",
continent: "North America",
},
{
code: "do",
value: "dominican-republic",
label: "Dominican Republic",
continent: "North America",
},
{
code: "ec",
value: "ecuador",
label: "Ecuador",
continent: "South America",
},
{ code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
{
code: "sv",
value: "el-salvador",
label: "El Salvador",
continent: "North America",
},
{
code: "gq",
value: "equatorial-guinea",
label: "Equatorial Guinea",
continent: "Africa",
},
{ code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" },
{ code: "ee", value: "estonia", label: "Estonia", continent: "Europe" },
{ code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" },
{ code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" },
{ code: "fi", value: "finland", label: "Finland", continent: "Europe" },
{ code: "fr", value: "france", label: "France", continent: "Europe" },
{ code: "ga", value: "gabon", label: "Gabon", continent: "Africa" },
{ code: "gm", value: "gambia", label: "Gambia", continent: "Africa" },
{ code: "ge", value: "georgia", label: "Georgia", continent: "Asia" },
{ code: "de", value: "germany", label: "Germany", continent: "Europe" },
{ code: "gh", value: "ghana", label: "Ghana", continent: "Africa" },
{ code: "gr", value: "greece", label: "Greece", continent: "Europe" },
{
code: "gd",
value: "grenada",
label: "Grenada",
continent: "North America",
},
{
code: "gt",
value: "guatemala",
label: "Guatemala",
continent: "North America",
},
{ code: "gn", value: "guinea", label: "Guinea", continent: "Africa" },
{
code: "gw",
value: "guinea-bissau",
label: "Guinea-Bissau",
continent: "Africa",
},
{ code: "gy", value: "guyana", label: "Guyana", continent: "South America" },
{ code: "ht", value: "haiti", label: "Haiti", continent: "North America" },
{
code: "hn",
value: "honduras",
label: "Honduras",
continent: "North America",
},
{ code: "hu", value: "hungary", label: "Hungary", continent: "Europe" },
{ code: "is", value: "iceland", label: "Iceland", continent: "Europe" },
{ code: "in", value: "india", label: "India", continent: "Asia" },
{ code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" },
{ code: "ir", value: "iran", label: "Iran", continent: "Asia" },
{ code: "iq", value: "iraq", label: "Iraq", continent: "Asia" },
{ code: "ie", value: "ireland", label: "Ireland", continent: "Europe" },
{ code: "il", value: "israel", label: "Israel", continent: "Asia" },
{ code: "it", value: "italy", label: "Italy", continent: "Europe" },
{
code: "jm",
value: "jamaica",
label: "Jamaica",
continent: "North America",
},
{ code: "jp", value: "japan", label: "Japan", continent: "Asia" },
{ code: "jo", value: "jordan", label: "Jordan", continent: "Asia" },
{ code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" },
{ code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
{ code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" },
{ code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" },
{ code: "la", value: "laos", label: "Laos", continent: "Asia" },
{ code: "lv", value: "latvia", label: "Latvia", continent: "Europe" },
{ code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" },
{ code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" },
{ code: "lr", value: "liberia", label: "Liberia", continent: "Africa" },
{ code: "ly", value: "libya", label: "Libya", continent: "Africa" },
{
code: "li",
value: "liechtenstein",
label: "Liechtenstein",
continent: "Europe",
},
{ code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" },
{ code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" },
{ code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" },
{ code: "mw", value: "malawi", label: "Malawi", continent: "Africa" },
{ code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" },
{ code: "mv", value: "maldives", label: "Maldives", continent: "Asia" },
{ code: "ml", value: "mali", label: "Mali", continent: "Africa" },
{ code: "mt", value: "malta", label: "Malta", continent: "Europe" },
{
code: "mh",
value: "marshall-islands",
label: "Marshall Islands",
continent: "Oceania",
},
{ code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" },
{ code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" },
{ code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
{
code: "fm",
value: "micronesia",
label: "Micronesia",
continent: "Oceania",
},
{ code: "md", value: "moldova", label: "Moldova", continent: "Europe" },
{ code: "mc", value: "monaco", label: "Monaco", continent: "Europe" },
{ code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" },
{ code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" },
{ code: "ma", value: "morocco", label: "Morocco", continent: "Africa" },
{ code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" },
{ code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" },
{ code: "na", value: "namibia", label: "Namibia", continent: "Africa" },
{ code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" },
{ code: "np", value: "nepal", label: "Nepal", continent: "Asia" },
{
code: "nl",
value: "netherlands",
label: "Netherlands",
continent: "Europe",
},
{
code: "nz",
value: "new-zealand",
label: "New Zealand",
continent: "Oceania",
},
{
code: "ni",
value: "nicaragua",
label: "Nicaragua",
continent: "North America",
},
{ code: "ne", value: "niger", label: "Niger", continent: "Africa" },
{ code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
{ code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" },
{
code: "mk",
value: "north-macedonia",
label: "North Macedonia",
continent: "Europe",
},
{ code: "no", value: "norway", label: "Norway", continent: "Europe" },
{ code: "om", value: "oman", label: "Oman", continent: "Asia" },
{ code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" },
{ code: "pw", value: "palau", label: "Palau", continent: "Oceania" },
{ code: "ps", value: "palestine", label: "Palestine", continent: "Asia" },
{ code: "pa", value: "panama", label: "Panama", continent: "North America" },
{
code: "pg",
value: "papua-new-guinea",
label: "Papua New Guinea",
continent: "Oceania",
},
{
code: "py",
value: "paraguay",
label: "Paraguay",
continent: "South America",
},
{ code: "pe", value: "peru", label: "Peru", continent: "South America" },
{ code: "ph", value: "philippines", label: "Philippines", continent: "Asia" },
{ code: "pl", value: "poland", label: "Poland", continent: "Europe" },
{ code: "pt", value: "portugal", label: "Portugal", continent: "Europe" },
{ code: "qa", value: "qatar", label: "Qatar", continent: "Asia" },
{ code: "ro", value: "romania", label: "Romania", continent: "Europe" },
{ code: "ru", value: "russia", label: "Russia", continent: "Europe" },
{ code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" },
{ code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" },
{ code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" },
{
code: "sa",
value: "saudi-arabia",
label: "Saudi Arabia",
continent: "Asia",
},
{ code: "sn", value: "senegal", label: "Senegal", continent: "Africa" },
{ code: "rs", value: "serbia", label: "Serbia", continent: "Europe" },
{ code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" },
{
code: "sl",
value: "sierra-leone",
label: "Sierra Leone",
continent: "Africa",
},
{ code: "sg", value: "singapore", label: "Singapore", continent: "Asia" },
{ code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" },
{ code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" },
{
code: "sb",
value: "solomon-islands",
label: "Solomon Islands",
continent: "Oceania",
},
{ code: "so", value: "somalia", label: "Somalia", continent: "Africa" },
{
code: "za",
value: "south-africa",
label: "South Africa",
continent: "Africa",
},
{ code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
{
code: "ss",
value: "south-sudan",
label: "South Sudan",
continent: "Africa",
},
{ code: "es", value: "spain", label: "Spain", continent: "Europe" },
{ code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" },
{ code: "sd", value: "sudan", label: "Sudan", continent: "Africa" },
{
code: "sr",
value: "suriname",
label: "Suriname",
continent: "South America",
},
{ code: "se", value: "sweden", label: "Sweden", continent: "Europe" },
{
code: "ch",
value: "switzerland",
label: "Switzerland",
continent: "Europe",
},
{ code: "sy", value: "syria", label: "Syria", continent: "Asia" },
{ code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" },
{ code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" },
{ code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" },
{ code: "th", value: "thailand", label: "Thailand", continent: "Asia" },
{ code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" },
{ code: "tg", value: "togo", label: "Togo", continent: "Africa" },
{ code: "to", value: "tonga", label: "Tonga", continent: "Oceania" },
{
code: "tt",
value: "trinidad-and-tobago",
label: "Trinidad and Tobago",
continent: "North America",
},
{ code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" },
{ code: "tr", value: "turkey", label: "Turkey", continent: "Asia" },
{
code: "tm",
value: "turkmenistan",
label: "Turkmenistan",
continent: "Asia",
},
{ code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" },
{ code: "ug", value: "uganda", label: "Uganda", continent: "Africa" },
{ code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" },
{
code: "ae",
value: "united-arab-emirates",
label: "United Arab Emirates",
continent: "Asia",
},
{
code: "gb",
value: "united-kingdom",
label: "United Kingdom",
continent: "Europe",
},
{
code: "us",
value: "united-states",
label: "United States",
continent: "North America",
},
{
code: "uy",
value: "uruguay",
label: "Uruguay",
continent: "South America",
},
{ code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" },
{ code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" },
{
code: "va",
value: "vatican-city",
label: "Vatican City",
continent: "Europe",
},
{
code: "ve",
value: "venezuela",
label: "Venezuela",
continent: "South America",
},
{ code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" },
{ code: "ye", value: "yemen", label: "Yemen", continent: "Asia" },
{ code: "zm", value: "zambia", label: "Zambia", continent: "Africa" },
{ code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" },
]
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxWithCustomItems() {
return (
<Combobox
items={countries.filter((country) => country.code !== "")}
itemToStringValue={(country: (typeof countries)[number]) => country.label}
>
<ComboboxInput placeholder="Search countries..." />
<ComboboxContent>
<ComboboxEmpty>No countries found.</ComboboxEmpty>
<ComboboxList>
{(country) => (
<ComboboxItem key={country.code} value={country}>
<Item size="xs" className="p-0">
<ItemContent>
<ItemTitle className="whitespace-nowrap">
{country.label}
</ItemTitle>
<ItemDescription>
{country.continent} ({country.code})
</ItemDescription>
</ItemContent>
</Item>
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

107
apps/v4/examples/base/combobox-with-form.tsx
View File

@@ -1,107 +0,0 @@
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import { Card, CardContent, CardFooter } from "@/examples/base/ui/card"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
import { Select } from "@/examples/base/ui/select"
import { toast } from "sonner"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxWithForm() {
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault()
const formData = new FormData(event.target as HTMLFormElement)
const framework = formData.get("framework") as string
toast(`You selected ${framework} as your framework.`)
}
return (
<Card className="w-full max-w-sm" size="sm">
<CardContent>
<form
id="form-with-combobox"
className="w-full"
onSubmit={handleSubmit}
>
<FieldGroup>
<Field>
<FieldLabel htmlFor="framework">Framework</FieldLabel>
<Combobox items={frameworks}>
<ComboboxInput
id="framework"
name="framework"
placeholder="Select a framework"
required
/>
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
</Field>
</FieldGroup>
</form>
</CardContent>
<CardFooter>
<Button type="submit" form="form-with-combobox">
Submit
</Button>
</CardFooter>
</Card>
)
}

110
apps/v4/examples/base/combobox-with-groups-and-separator.tsx
View File

@@ -1,110 +0,0 @@
import {
Combobox,
ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxList,
ComboboxSeparator,
} from "@/examples/base/ui/combobox"
import { Select } from "@/examples/base/ui/select"
const timezones = [
{
value: "Americas",
items: [
"(GMT-5) New York",
"(GMT-8) Los Angeles",
"(GMT-6) Chicago",
"(GMT-5) Toronto",
"(GMT-8) Vancouver",
"(GMT-3) São Paulo",
],
},
{
value: "Europe",
items: [
"(GMT+0) London",
"(GMT+1) Paris",
"(GMT+1) Berlin",
"(GMT+1) Rome",
"(GMT+1) Madrid",
"(GMT+1) Amsterdam",
],
},
{
value: "Asia/Pacific",
items: [
"(GMT+9) Tokyo",
"(GMT+8) Shanghai",
"(GMT+8) Singapore",
"(GMT+4) Dubai",
"(GMT+11) Sydney",
"(GMT+9) Seoul",
],
},
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxWithGroupsAndSeparator() {
return (
<Combobox items={timezones}>
<ComboboxInput placeholder="Select a timezone" />
<ComboboxContent>
<ComboboxEmpty>No timezones found.</ComboboxEmpty>
<ComboboxList>
{(group) => (
<ComboboxGroup key={group.value} items={group.items}>
<ComboboxLabel>{group.value}</ComboboxLabel>
<ComboboxCollection>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxCollection>
<ComboboxSeparator />
</ComboboxGroup>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

108
apps/v4/examples/base/combobox-with-groups.tsx
View File

@@ -1,108 +0,0 @@
import {
Combobox,
ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxList,
} from "@/examples/base/ui/combobox"
import { Select } from "@/examples/base/ui/select"
const timezones = [
{
value: "Americas",
items: [
"(GMT-5) New York",
"(GMT-8) Los Angeles",
"(GMT-6) Chicago",
"(GMT-5) Toronto",
"(GMT-8) Vancouver",
"(GMT-3) São Paulo",
],
},
{
value: "Europe",
items: [
"(GMT+0) London",
"(GMT+1) Paris",
"(GMT+1) Berlin",
"(GMT+1) Rome",
"(GMT+1) Madrid",
"(GMT+1) Amsterdam",
],
},
{
value: "Asia/Pacific",
items: [
"(GMT+9) Tokyo",
"(GMT+8) Shanghai",
"(GMT+8) Singapore",
"(GMT+4) Dubai",
"(GMT+11) Sydney",
"(GMT+9) Seoul",
],
},
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxWithGroups() {
return (
<Combobox items={timezones}>
<ComboboxInput placeholder="Select a timezone" />
<ComboboxContent>
<ComboboxEmpty>No timezones found.</ComboboxEmpty>
<ComboboxList>
{(group) => (
<ComboboxGroup key={group.value} items={group.items}>
<ComboboxLabel>{group.value}</ComboboxLabel>
<ComboboxCollection>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxCollection>
</ComboboxGroup>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

115
apps/v4/examples/base/combobox-with-other-inputs.tsx
View File

@@ -1,115 +0,0 @@
import { Button } from "@/examples/base/ui/button"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/base/ui/combobox"
import { Input } from "@/examples/base/ui/input"
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/examples/base/ui/input-group"
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/examples/base/ui/select"
import { ChevronDownIcon } from "lucide-react"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
const items = [
{
label: "Select a framework",
value: null,
},
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
{
label: "Solid",
value: "solid",
},
{
label: "Preact",
value: "preact",
},
{
label: "Next.js",
value: "next.js",
},
]
export function ComboboxWithOtherInputs() {
return (
<>
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" className="w-52" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
<Select items={items}>
<SelectTrigger className="w-52">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{items.map((item) => (
<SelectItem key={item.value} value={item.value}>
{item.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<Button
variant="outline"
className="text-muted-foreground w-52 justify-between font-normal"
>
Select a framework
<ChevronDownIcon />
</Button>
<Input placeholder="Select a framework" className="w-52" />
<InputGroup className="w-52">
<InputGroupInput placeholder="Select a framework" />
<InputGroupAddon align="inline-end">
<ChevronDownIcon />
</InputGroupAddon>
</InputGroup>
</>
)
}

3
apps/v4/examples/radix/combobox-auto-highlight.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxContent,
@@ -6,7 +8,6 @@ import {
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import { Select } from "@/examples/radix/ui/select"
const frameworks = [
"Next.js",

5
apps/v4/examples/radix/combobox-basic.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxContent,
@@ -6,7 +8,6 @@ import {
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import { Select } from "@/examples/radix/ui/select"
const frameworks = [
"Next.js",
@@ -16,7 +17,7 @@ const frameworks = [
"Astro",
] as const
export function ComboboxBasic() {
export default function ComboboxBasic() {
return (
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" />

4
apps/v4/examples/radix/combobox-with-clear.tsx → apps/v4/examples/radix/combobox-clear.tsx
View File

@@ -1,4 +1,5 @@
import { Button } from "@/examples/radix/ui/button"
"use client"
import {
Combobox,
ComboboxContent,
@@ -7,7 +8,6 @@ import {
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import { Select } from "@/examples/radix/ui/select"
const frameworks = [
"Next.js",

99
apps/v4/examples/radix/combobox-custom.tsx Normal file
View File

@@ -0,0 +1,99 @@
"use client"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import {
Item,
ItemContent,
ItemDescription,
ItemTitle,
} from "@/examples/radix/ui/item"
const countries = [
{ code: "", value: "", continent: "", label: "Select country" },
{
code: "ar",
value: "argentina",
label: "Argentina",
continent: "South America",
},
{ code: "au", value: "australia", label: "Australia", continent: "Oceania" },
{ code: "br", value: "brazil", label: "Brazil", continent: "South America" },
{ code: "ca", value: "canada", label: "Canada", continent: "North America" },
{ code: "cn", value: "china", label: "China", continent: "Asia" },
{
code: "co",
value: "colombia",
label: "Colombia",
continent: "South America",
},
{ code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
{ code: "fr", value: "france", label: "France", continent: "Europe" },
{ code: "de", value: "germany", label: "Germany", continent: "Europe" },
{ code: "it", value: "italy", label: "Italy", continent: "Europe" },
{ code: "jp", value: "japan", label: "Japan", continent: "Asia" },
{ code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
{ code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
{
code: "nz",
value: "new-zealand",
label: "New Zealand",
continent: "Oceania",
},
{ code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
{
code: "za",
value: "south-africa",
label: "South Africa",
continent: "Africa",
},
{ code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
{
code: "gb",
value: "united-kingdom",
label: "United Kingdom",
continent: "Europe",
},
{
code: "us",
value: "united-states",
label: "United States",
continent: "North America",
},
]
export function ComboboxWithCustomItems() {
return (
<Combobox
items={countries.filter((country) => country.code !== "")}
itemToStringValue={(country: (typeof countries)[number]) => country.label}
>
<ComboboxInput placeholder="Search countries..." />
<ComboboxContent>
<ComboboxEmpty>No countries found.</ComboboxEmpty>
<ComboboxList>
{(country) => (
<ComboboxItem key={country.code} value={country}>
<Item size="xs" className="p-0">
<ItemContent>
<ItemTitle className="whitespace-nowrap">
{country.label}
</ItemTitle>
<ItemDescription>
{country.continent} ({country.code})
</ItemDescription>
</ItemContent>
</Item>
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

112
apps/v4/examples/radix/combobox-demo.tsx
View File

@@ -1,94 +1,36 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/radix/ui/button"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/examples/radix/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/examples/radix/ui/popover"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/lib/utils"
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
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 default function ComboboxDemo() {
const [open, setOpen] = React.useState(false)
const [value, setValue] = React.useState("")
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
export default function ComboboxBasic() {
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="w-[200px] justify-between"
>
{value
? frameworks.find((framework) => framework.value === value)?.label
: "Select framework..."}
<ChevronsUpDown className="opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder="Search framework..." className="h-9" />
<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)
}}
>
{framework.label}
<Check
className={cn(
"ml-auto",
value === framework.value ? "opacity-100" : "opacity-0"
)}
/>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

3
apps/v4/examples/radix/combobox-disabled.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxContent,
@@ -6,7 +8,6 @@ import {
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import { Select } from "@/examples/radix/ui/select"
const frameworks = [
"Next.js",

102
apps/v4/examples/radix/combobox-dropdown-menu.tsx
View File

@@ -1,102 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/radix/ui/button"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/examples/radix/ui/command"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import { MoreHorizontal } from "lucide-react"
const labels = [
"feature",
"bug",
"enhancement",
"documentation",
"design",
"question",
"maintenance",
]
export default function ComboboxDropdownMenu() {
const [label, setLabel] = React.useState("feature")
const [open, setOpen] = React.useState(false)
return (
<div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
<p className="text-sm leading-none font-medium">
<span className="bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs">
{label}
</span>
<span className="text-muted-foreground">Create a new project</span>
</p>
<DropdownMenu open={open} onOpenChange={setOpen}>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm">
<MoreHorizontal />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[200px]">
<DropdownMenuGroup>
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem>Assign to...</DropdownMenuItem>
<DropdownMenuItem>Set due date...</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuGroup>
<DropdownMenuSub>
<DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="p-0">
<Command>
<CommandInput
placeholder="Filter label..."
autoFocus={true}
className="h-9"
/>
<CommandList>
<CommandEmpty>No label found.</CommandEmpty>
<CommandGroup>
{labels.map((label) => (
<CommandItem
key={label}
value={label}
onSelect={(value) => {
setLabel(value)
setOpen(false)
}}
>
{label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuGroup>
<DropdownMenuItem className="text-red-600">
Delete
<DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
)
}

7
apps/v4/examples/radix/combobox-with-groups-and-separator.tsx → apps/v4/examples/radix/combobox-groups.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxCollection,
@@ -10,7 +12,6 @@ import {
ComboboxList,
ComboboxSeparator,
} from "@/examples/radix/ui/combobox"
import { Select } from "@/examples/radix/ui/select"
const timezones = [
{
@@ -55,7 +56,7 @@ export function ComboboxWithGroupsAndSeparator() {
<ComboboxContent>
<ComboboxEmpty>No timezones found.</ComboboxEmpty>
<ComboboxList>
{(group) => (
{(group, index) => (
<ComboboxGroup key={group.value} items={group.items}>
<ComboboxLabel>{group.value}</ComboboxLabel>
<ComboboxCollection>
@@ -65,7 +66,7 @@ export function ComboboxWithGroupsAndSeparator() {
</ComboboxItem>
)}
</ComboboxCollection>
<ComboboxSeparator />
{index < timezones.length - 1 && <ComboboxSeparator />}
</ComboboxGroup>
)}
</ComboboxList>

91
apps/v4/examples/radix/combobox-in-dialog.tsx
View File

@@ -1,91 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/radix/ui/button"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/examples/radix/ui/dialog"
import { Field, FieldLabel } from "@/examples/radix/ui/field"
import { Select } from "@/examples/radix/ui/select"
import { toast } from "sonner"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
export function ComboboxInDialog() {
const [open, setOpen] = React.useState(false)
return (
<Dialog open={open} onOpenChange={setOpen} modal={false}>
<DialogTrigger asChild>
<Button variant="outline">Open Dialog</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Select Framework</DialogTitle>
<DialogDescription>
Choose your preferred framework from the list below.
</DialogDescription>
</DialogHeader>
<Field>
<FieldLabel htmlFor="framework-dialog" className="sr-only">
Framework
</FieldLabel>
<Combobox items={frameworks}>
<ComboboxInput
id="framework-dialog"
placeholder="Select a framework"
/>
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
</Field>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => setOpen(false)}
>
Cancel
</Button>
<Button
type="button"
onClick={() => {
toast("Framework selected.")
setOpen(false)
}}
>
Confirm
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}

453
apps/v4/examples/radix/combobox-in-popup.tsx
View File

@@ -1,453 +0,0 @@
import { Button } from "@/examples/radix/ui/button"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
ComboboxTrigger,
ComboboxValue,
} from "@/examples/radix/ui/combobox"
import { Select } from "@/examples/radix/ui/select"
const countries = [
{ code: "", value: "", continent: "", label: "Select country" },
{ code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
{ code: "al", value: "albania", label: "Albania", continent: "Europe" },
{ code: "dz", value: "algeria", label: "Algeria", continent: "Africa" },
{ code: "ad", value: "andorra", label: "Andorra", continent: "Europe" },
{ code: "ao", value: "angola", label: "Angola", continent: "Africa" },
{
code: "ar",
value: "argentina",
label: "Argentina",
continent: "South America",
},
{ code: "am", value: "armenia", label: "Armenia", continent: "Asia" },
{ code: "au", value: "australia", label: "Australia", continent: "Oceania" },
{ code: "at", value: "austria", label: "Austria", continent: "Europe" },
{ code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" },
{
code: "bs",
value: "bahamas",
label: "Bahamas",
continent: "North America",
},
{ code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" },
{ code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" },
{
code: "bb",
value: "barbados",
label: "Barbados",
continent: "North America",
},
{ code: "by", value: "belarus", label: "Belarus", continent: "Europe" },
{ code: "be", value: "belgium", label: "Belgium", continent: "Europe" },
{ code: "bz", value: "belize", label: "Belize", continent: "North America" },
{ code: "bj", value: "benin", label: "Benin", continent: "Africa" },
{ code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" },
{
code: "bo",
value: "bolivia",
label: "Bolivia",
continent: "South America",
},
{
code: "ba",
value: "bosnia-and-herzegovina",
label: "Bosnia and Herzegovina",
continent: "Europe",
},
{ code: "bw", value: "botswana", label: "Botswana", continent: "Africa" },
{ code: "br", value: "brazil", label: "Brazil", continent: "South America" },
{ code: "bn", value: "brunei", label: "Brunei", continent: "Asia" },
{ code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" },
{
code: "bf",
value: "burkina-faso",
label: "Burkina Faso",
continent: "Africa",
},
{ code: "bi", value: "burundi", label: "Burundi", continent: "Africa" },
{ code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" },
{ code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" },
{ code: "ca", value: "canada", label: "Canada", continent: "North America" },
{ code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" },
{
code: "cf",
value: "central-african-republic",
label: "Central African Republic",
continent: "Africa",
},
{ code: "td", value: "chad", label: "Chad", continent: "Africa" },
{ code: "cl", value: "chile", label: "Chile", continent: "South America" },
{ code: "cn", value: "china", label: "China", continent: "Asia" },
{
code: "co",
value: "colombia",
label: "Colombia",
continent: "South America",
},
{ code: "km", value: "comoros", label: "Comoros", continent: "Africa" },
{ code: "cg", value: "congo", label: "Congo", continent: "Africa" },
{
code: "cr",
value: "costa-rica",
label: "Costa Rica",
continent: "North America",
},
{ code: "hr", value: "croatia", label: "Croatia", continent: "Europe" },
{ code: "cu", value: "cuba", label: "Cuba", continent: "North America" },
{ code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" },
{
code: "cz",
value: "czech-republic",
label: "Czech Republic",
continent: "Europe",
},
{ code: "dk", value: "denmark", label: "Denmark", continent: "Europe" },
{ code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" },
{
code: "dm",
value: "dominica",
label: "Dominica",
continent: "North America",
},
{
code: "do",
value: "dominican-republic",
label: "Dominican Republic",
continent: "North America",
},
{
code: "ec",
value: "ecuador",
label: "Ecuador",
continent: "South America",
},
{ code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
{
code: "sv",
value: "el-salvador",
label: "El Salvador",
continent: "North America",
},
{
code: "gq",
value: "equatorial-guinea",
label: "Equatorial Guinea",
continent: "Africa",
},
{ code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" },
{ code: "ee", value: "estonia", label: "Estonia", continent: "Europe" },
{ code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" },
{ code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" },
{ code: "fi", value: "finland", label: "Finland", continent: "Europe" },
{ code: "fr", value: "france", label: "France", continent: "Europe" },
{ code: "ga", value: "gabon", label: "Gabon", continent: "Africa" },
{ code: "gm", value: "gambia", label: "Gambia", continent: "Africa" },
{ code: "ge", value: "georgia", label: "Georgia", continent: "Asia" },
{ code: "de", value: "germany", label: "Germany", continent: "Europe" },
{ code: "gh", value: "ghana", label: "Ghana", continent: "Africa" },
{ code: "gr", value: "greece", label: "Greece", continent: "Europe" },
{
code: "gd",
value: "grenada",
label: "Grenada",
continent: "North America",
},
{
code: "gt",
value: "guatemala",
label: "Guatemala",
continent: "North America",
},
{ code: "gn", value: "guinea", label: "Guinea", continent: "Africa" },
{
code: "gw",
value: "guinea-bissau",
label: "Guinea-Bissau",
continent: "Africa",
},
{ code: "gy", value: "guyana", label: "Guyana", continent: "South America" },
{ code: "ht", value: "haiti", label: "Haiti", continent: "North America" },
{
code: "hn",
value: "honduras",
label: "Honduras",
continent: "North America",
},
{ code: "hu", value: "hungary", label: "Hungary", continent: "Europe" },
{ code: "is", value: "iceland", label: "Iceland", continent: "Europe" },
{ code: "in", value: "india", label: "India", continent: "Asia" },
{ code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" },
{ code: "ir", value: "iran", label: "Iran", continent: "Asia" },
{ code: "iq", value: "iraq", label: "Iraq", continent: "Asia" },
{ code: "ie", value: "ireland", label: "Ireland", continent: "Europe" },
{ code: "il", value: "israel", label: "Israel", continent: "Asia" },
{ code: "it", value: "italy", label: "Italy", continent: "Europe" },
{
code: "jm",
value: "jamaica",
label: "Jamaica",
continent: "North America",
},
{ code: "jp", value: "japan", label: "Japan", continent: "Asia" },
{ code: "jo", value: "jordan", label: "Jordan", continent: "Asia" },
{ code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" },
{ code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
{ code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" },
{ code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" },
{ code: "la", value: "laos", label: "Laos", continent: "Asia" },
{ code: "lv", value: "latvia", label: "Latvia", continent: "Europe" },
{ code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" },
{ code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" },
{ code: "lr", value: "liberia", label: "Liberia", continent: "Africa" },
{ code: "ly", value: "libya", label: "Libya", continent: "Africa" },
{
code: "li",
value: "liechtenstein",
label: "Liechtenstein",
continent: "Europe",
},
{ code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" },
{ code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" },
{ code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" },
{ code: "mw", value: "malawi", label: "Malawi", continent: "Africa" },
{ code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" },
{ code: "mv", value: "maldives", label: "Maldives", continent: "Asia" },
{ code: "ml", value: "mali", label: "Mali", continent: "Africa" },
{ code: "mt", value: "malta", label: "Malta", continent: "Europe" },
{
code: "mh",
value: "marshall-islands",
label: "Marshall Islands",
continent: "Oceania",
},
{ code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" },
{ code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" },
{ code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
{
code: "fm",
value: "micronesia",
label: "Micronesia",
continent: "Oceania",
},
{ code: "md", value: "moldova", label: "Moldova", continent: "Europe" },
{ code: "mc", value: "monaco", label: "Monaco", continent: "Europe" },
{ code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" },
{ code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" },
{ code: "ma", value: "morocco", label: "Morocco", continent: "Africa" },
{ code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" },
{ code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" },
{ code: "na", value: "namibia", label: "Namibia", continent: "Africa" },
{ code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" },
{ code: "np", value: "nepal", label: "Nepal", continent: "Asia" },
{
code: "nl",
value: "netherlands",
label: "Netherlands",
continent: "Europe",
},
{
code: "nz",
value: "new-zealand",
label: "New Zealand",
continent: "Oceania",
},
{
code: "ni",
value: "nicaragua",
label: "Nicaragua",
continent: "North America",
},
{ code: "ne", value: "niger", label: "Niger", continent: "Africa" },
{ code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
{ code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" },
{
code: "mk",
value: "north-macedonia",
label: "North Macedonia",
continent: "Europe",
},
{ code: "no", value: "norway", label: "Norway", continent: "Europe" },
{ code: "om", value: "oman", label: "Oman", continent: "Asia" },
{ code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" },
{ code: "pw", value: "palau", label: "Palau", continent: "Oceania" },
{ code: "ps", value: "palestine", label: "Palestine", continent: "Asia" },
{ code: "pa", value: "panama", label: "Panama", continent: "North America" },
{
code: "pg",
value: "papua-new-guinea",
label: "Papua New Guinea",
continent: "Oceania",
},
{
code: "py",
value: "paraguay",
label: "Paraguay",
continent: "South America",
},
{ code: "pe", value: "peru", label: "Peru", continent: "South America" },
{ code: "ph", value: "philippines", label: "Philippines", continent: "Asia" },
{ code: "pl", value: "poland", label: "Poland", continent: "Europe" },
{ code: "pt", value: "portugal", label: "Portugal", continent: "Europe" },
{ code: "qa", value: "qatar", label: "Qatar", continent: "Asia" },
{ code: "ro", value: "romania", label: "Romania", continent: "Europe" },
{ code: "ru", value: "russia", label: "Russia", continent: "Europe" },
{ code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" },
{ code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" },
{ code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" },
{
code: "sa",
value: "saudi-arabia",
label: "Saudi Arabia",
continent: "Asia",
},
{ code: "sn", value: "senegal", label: "Senegal", continent: "Africa" },
{ code: "rs", value: "serbia", label: "Serbia", continent: "Europe" },
{ code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" },
{
code: "sl",
value: "sierra-leone",
label: "Sierra Leone",
continent: "Africa",
},
{ code: "sg", value: "singapore", label: "Singapore", continent: "Asia" },
{ code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" },
{ code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" },
{
code: "sb",
value: "solomon-islands",
label: "Solomon Islands",
continent: "Oceania",
},
{ code: "so", value: "somalia", label: "Somalia", continent: "Africa" },
{
code: "za",
value: "south-africa",
label: "South Africa",
continent: "Africa",
},
{ code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
{
code: "ss",
value: "south-sudan",
label: "South Sudan",
continent: "Africa",
},
{ code: "es", value: "spain", label: "Spain", continent: "Europe" },
{ code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" },
{ code: "sd", value: "sudan", label: "Sudan", continent: "Africa" },
{
code: "sr",
value: "suriname",
label: "Suriname",
continent: "South America",
},
{ code: "se", value: "sweden", label: "Sweden", continent: "Europe" },
{
code: "ch",
value: "switzerland",
label: "Switzerland",
continent: "Europe",
},
{ code: "sy", value: "syria", label: "Syria", continent: "Asia" },
{ code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" },
{ code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" },
{ code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" },
{ code: "th", value: "thailand", label: "Thailand", continent: "Asia" },
{ code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" },
{ code: "tg", value: "togo", label: "Togo", continent: "Africa" },
{ code: "to", value: "tonga", label: "Tonga", continent: "Oceania" },
{
code: "tt",
value: "trinidad-and-tobago",
label: "Trinidad and Tobago",
continent: "North America",
},
{ code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" },
{ code: "tr", value: "turkey", label: "Turkey", continent: "Asia" },
{
code: "tm",
value: "turkmenistan",
label: "Turkmenistan",
continent: "Asia",
},
{ code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" },
{ code: "ug", value: "uganda", label: "Uganda", continent: "Africa" },
{ code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" },
{
code: "ae",
value: "united-arab-emirates",
label: "United Arab Emirates",
continent: "Asia",
},
{
code: "gb",
value: "united-kingdom",
label: "United Kingdom",
continent: "Europe",
},
{
code: "us",
value: "united-states",
label: "United States",
continent: "North America",
},
{
code: "uy",
value: "uruguay",
label: "Uruguay",
continent: "South America",
},
{ code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" },
{ code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" },
{
code: "va",
value: "vatican-city",
label: "Vatican City",
continent: "Europe",
},
{
code: "ve",
value: "venezuela",
label: "Venezuela",
continent: "South America",
},
{ code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" },
{ code: "ye", value: "yemen", label: "Yemen", continent: "Asia" },
{ code: "zm", value: "zambia", label: "Zambia", continent: "Africa" },
{ code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" },
]
export function ComboboxInPopup() {
return (
<>
<Combobox items={countries} defaultValue={countries[0]}>
<ComboboxTrigger
render={
<Button
variant="outline"
className="w-64 justify-between font-normal"
/>
}
>
<ComboboxValue />
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput showTrigger={false} placeholder="Search" />
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item.code} value={item}>
{item.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
</>
)
}

8
apps/v4/examples/radix/comboxbox-input-addon.tsx → apps/v4/examples/radix/combobox-input-group.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxCollection,
@@ -9,9 +11,7 @@ import {
ComboboxLabel,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import { Input } from "@/examples/radix/ui/input"
import { InputGroup, InputGroupAddon } from "@/examples/radix/ui/input-group"
import { Select } from "@/examples/radix/ui/select"
import { InputGroupAddon } from "@/examples/radix/ui/input-group"
import { GlobeIcon } from "lucide-react"
const timezones = [
@@ -50,7 +50,7 @@ const timezones = [
},
] as const
export function ComboxboxInputAddon() {
export function ComboxboxInputGroup() {
return (
<Combobox items={timezones}>
<ComboboxInput placeholder="Select a timezone">

59
apps/v4/examples/radix/combobox-invalid.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import {
Combobox,
ComboboxContent,
@@ -6,13 +8,6 @@ import {
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from "@/examples/radix/ui/field"
import { Select } from "@/examples/radix/ui/select"
const frameworks = [
"Next.js",
@@ -24,42 +19,18 @@ const frameworks = [
export function ComboboxInvalid() {
return (
<div className="flex flex-col gap-4">
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" aria-invalid="true" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
<Field data-invalid>
<FieldLabel htmlFor="combobox-framework-invalid">Framework</FieldLabel>
<Combobox items={frameworks}>
<ComboboxInput
id="combobox-framework-invalid"
placeholder="Select a framework"
aria-invalid
/>
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
<FieldDescription>Please select a valid framework.</FieldDescription>
<FieldError errors={[{ message: "This field is required." }]} />
</Field>
</div>
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" aria-invalid="true" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

29
apps/v4/examples/radix/combobox-large-list.tsx
View File

@@ -1,29 +0,0 @@
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import { Item } from "@/examples/radix/ui/item"
const largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)
export function ComboboxLargeList() {
return (
<Combobox items={largeListItems}>
<ComboboxInput placeholder="Search from 100 items" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

58
apps/v4/examples/radix/combobox-multiple-disabled.tsx
View File

@@ -1,58 +0,0 @@
import * as React from "react"
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxContent,
ComboboxEmpty,
ComboboxItem,
ComboboxList,
ComboboxValue,
useComboboxAnchor,
} from "@/examples/radix/ui/combobox"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
export function ComboboxMultipleDisabled() {
const anchor = useComboboxAnchor()
return (
<Combobox
multiple
autoHighlight
items={frameworks}
defaultValue={[frameworks[0], frameworks[1]]}
disabled
>
<ComboboxChips ref={anchor}>
<ComboboxValue>
{(values) => (
<React.Fragment>
{values.map((value: string) => (
<ComboboxChip key={value}>{value}</ComboboxChip>
))}
<ComboboxChipsInput disabled />
</React.Fragment>
)}
</ComboboxValue>
</ComboboxChips>
<ComboboxContent anchor={anchor}>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

105
apps/v4/examples/radix/combobox-multiple-invalid.tsx
View File

@@ -1,105 +0,0 @@
import * as React from "react"
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxContent,
ComboboxEmpty,
ComboboxItem,
ComboboxList,
ComboboxValue,
useComboboxAnchor,
} from "@/examples/radix/ui/combobox"
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from "@/examples/radix/ui/field"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
export function ComboboxMultipleInvalid() {
const anchor1 = useComboboxAnchor()
const anchor2 = useComboboxAnchor()
return (
<div className="flex flex-col gap-4">
<Combobox
multiple
autoHighlight
items={frameworks}
defaultValue={[frameworks[0], frameworks[1]]}
>
<ComboboxChips ref={anchor1}>
<ComboboxValue>
{(values) => (
<React.Fragment>
{values.map((value: string) => (
<ComboboxChip key={value}>{value}</ComboboxChip>
))}
<ComboboxChipsInput aria-invalid="true" />
</React.Fragment>
)}
</ComboboxValue>
</ComboboxChips>
<ComboboxContent anchor={anchor1}>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
<Field data-invalid>
<FieldLabel htmlFor="combobox-multiple-invalid">Frameworks</FieldLabel>
<Combobox
multiple
autoHighlight
items={frameworks}
defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}
>
<ComboboxChips ref={anchor2}>
<ComboboxValue>
{(values) => (
<React.Fragment>
{values.map((value: string) => (
<ComboboxChip key={value}>{value}</ComboboxChip>
))}
<ComboboxChipsInput
id="combobox-multiple-invalid"
aria-invalid
/>
</React.Fragment>
)}
</ComboboxValue>
</ComboboxChips>
<ComboboxContent anchor={anchor2}>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
<FieldDescription>
Please select at least one framework.
</FieldDescription>
<FieldError errors={[{ message: "This field is required." }]} />
</Field>
</div>
)
}

59
apps/v4/examples/radix/combobox-multiple-no-remove.tsx
View File

@@ -1,59 +0,0 @@
import * as React from "react"
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxContent,
ComboboxEmpty,
ComboboxItem,
ComboboxList,
ComboboxValue,
useComboboxAnchor,
} from "@/examples/radix/ui/combobox"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
export function ComboboxMultipleNoRemove() {
const anchor = useComboboxAnchor()
return (
<Combobox
multiple
autoHighlight
items={frameworks}
defaultValue={[frameworks[0], frameworks[1]]}
>
<ComboboxChips ref={anchor}>
<ComboboxValue>
{(values) => (
<React.Fragment>
{values.map((value: string) => (
<ComboboxChip key={value} showRemove={false}>
{value}
</ComboboxChip>
))}
<ComboboxChipsInput />
</React.Fragment>
)}
</ComboboxValue>
</ComboboxChips>
<ComboboxContent anchor={anchor}>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

4
apps/v4/examples/radix/combobox-multiple.tsx
View File

@@ -1,3 +1,5 @@
"use client"
import * as React from "react"
import {
Combobox,
@@ -30,7 +32,7 @@ export function ComboboxMultiple() {
items={frameworks}
defaultValue={[frameworks[0]]}
>
<ComboboxChips ref={anchor}>
<ComboboxChips ref={anchor} className="w-full max-w-xs">
<ComboboxValue>
{(values) => (
<React.Fragment>

90
apps/v4/examples/radix/combobox-popover.tsx
View File

@@ -1,90 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/radix/ui/button"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/examples/radix/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/examples/radix/ui/popover"
type Status = {
value: string
label: string
}
const statuses: Status[] = [
{
value: "backlog",
label: "Backlog",
},
{
value: "todo",
label: "Todo",
},
{
value: "in progress",
label: "In Progress",
},
{
value: "done",
label: "Done",
},
{
value: "canceled",
label: "Canceled",
},
]
export default function ComboboxPopover() {
const [open, setOpen] = React.useState(false)
const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
null
)
return (
<div className="flex items-center space-x-4">
<p className="text-muted-foreground text-sm">Status</p>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button variant="outline" className="w-[150px] justify-start">
{selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" side="right" align="start">
<Command>
<CommandInput placeholder="Change status..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
{statuses.map((status) => (
<CommandItem
key={status.value}
value={status.value}
onSelect={(value) => {
setSelectedStatus(
statuses.find((priority) => priority.value === value) ||
null
)
setOpen(false)
}}
>
{status.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
)
}

96
apps/v4/examples/radix/combobox-popup.tsx Normal file
View File

@@ -0,0 +1,96 @@
"use client"
import { Button } from "@/examples/radix/ui/button"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
ComboboxTrigger,
ComboboxValue,
} from "@/examples/radix/ui/combobox"
const countries = [
{ code: "", value: "", continent: "", label: "Select country" },
{
code: "ar",
value: "argentina",
label: "Argentina",
continent: "South America",
},
{ code: "au", value: "australia", label: "Australia", continent: "Oceania" },
{ code: "br", value: "brazil", label: "Brazil", continent: "South America" },
{ code: "ca", value: "canada", label: "Canada", continent: "North America" },
{ code: "cn", value: "china", label: "China", continent: "Asia" },
{
code: "co",
value: "colombia",
label: "Colombia",
continent: "South America",
},
{ code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
{ code: "fr", value: "france", label: "France", continent: "Europe" },
{ code: "de", value: "germany", label: "Germany", continent: "Europe" },
{ code: "it", value: "italy", label: "Italy", continent: "Europe" },
{ code: "jp", value: "japan", label: "Japan", continent: "Asia" },
{ code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
{ code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
{
code: "nz",
value: "new-zealand",
label: "New Zealand",
continent: "Oceania",
},
{ code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
{
code: "za",
value: "south-africa",
label: "South Africa",
continent: "Africa",
},
{ code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
{
code: "gb",
value: "united-kingdom",
label: "United Kingdom",
continent: "Europe",
},
{
code: "us",
value: "united-states",
label: "United States",
continent: "North America",
},
]
export function ComboboxPopup() {
return (
<>
<Combobox items={countries} defaultValue={countries[0]}>
<ComboboxTrigger
render={
<Button
variant="outline"
className="w-64 justify-between font-normal"
/>
}
>
<ComboboxValue />
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput showTrigger={false} placeholder="Search" />
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item.code} value={item}>
{item.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
</>
)
}

123
apps/v4/examples/radix/combobox-responsive.tsx
View File

@@ -1,123 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/radix/ui/button"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/examples/radix/ui/command"
import {
Drawer,
DrawerContent,
DrawerTrigger,
} from "@/examples/radix/ui/drawer"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/examples/radix/ui/popover"
import { useMediaQuery } from "@/hooks/use-media-query"
type Status = {
value: string
label: string
}
const statuses: Status[] = [
{
value: "backlog",
label: "Backlog",
},
{
value: "todo",
label: "Todo",
},
{
value: "in progress",
label: "In Progress",
},
{
value: "done",
label: "Done",
},
{
value: "canceled",
label: "Canceled",
},
]
export default function ComboBoxResponsive() {
const [open, setOpen] = React.useState(false)
const isDesktop = useMediaQuery("(min-width: 768px)")
const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
null
)
if (isDesktop) {
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button variant="outline" className="w-[150px] justify-start">
{selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0" align="start">
<StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
</PopoverContent>
</Popover>
)
}
return (
<Drawer open={open} onOpenChange={setOpen}>
<DrawerTrigger asChild>
<Button variant="outline" className="w-[150px] justify-start">
{selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
</Button>
</DrawerTrigger>
<DrawerContent>
<div className="mt-4 border-t">
<StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
</div>
</DrawerContent>
</Drawer>
)
}
function StatusList({
setOpen,
setSelectedStatus,
}: {
setOpen: (open: boolean) => void
setSelectedStatus: (status: Status | null) => void
}) {
return (
<Command>
<CommandInput placeholder="Filter status..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
{statuses.map((status) => (
<CommandItem
key={status.value}
value={status.value}
onSelect={(value) => {
setSelectedStatus(
statuses.find((priority) => priority.value === value) || null
)
setOpen(false)
}}
>
{status.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
)
}

456
apps/v4/examples/radix/combobox-with-custom-items.tsx
View File

@@ -1,456 +0,0 @@
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import {
Item,
ItemContent,
ItemDescription,
ItemTitle,
} from "@/examples/radix/ui/item"
import { Select } from "@/examples/radix/ui/select"
const countries = [
{ code: "", value: "", continent: "", label: "Select country" },
{ code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
{ code: "al", value: "albania", label: "Albania", continent: "Europe" },
{ code: "dz", value: "algeria", label: "Algeria", continent: "Africa" },
{ code: "ad", value: "andorra", label: "Andorra", continent: "Europe" },
{ code: "ao", value: "angola", label: "Angola", continent: "Africa" },
{
code: "ar",
value: "argentina",
label: "Argentina",
continent: "South America",
},
{ code: "am", value: "armenia", label: "Armenia", continent: "Asia" },
{ code: "au", value: "australia", label: "Australia", continent: "Oceania" },
{ code: "at", value: "austria", label: "Austria", continent: "Europe" },
{ code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" },
{
code: "bs",
value: "bahamas",
label: "Bahamas",
continent: "North America",
},
{ code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" },
{ code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" },
{
code: "bb",
value: "barbados",
label: "Barbados",
continent: "North America",
},
{ code: "by", value: "belarus", label: "Belarus", continent: "Europe" },
{ code: "be", value: "belgium", label: "Belgium", continent: "Europe" },
{ code: "bz", value: "belize", label: "Belize", continent: "North America" },
{ code: "bj", value: "benin", label: "Benin", continent: "Africa" },
{ code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" },
{
code: "bo",
value: "bolivia",
label: "Bolivia",
continent: "South America",
},
{
code: "ba",
value: "bosnia-and-herzegovina",
label: "Bosnia and Herzegovina",
continent: "Europe",
},
{ code: "bw", value: "botswana", label: "Botswana", continent: "Africa" },
{ code: "br", value: "brazil", label: "Brazil", continent: "South America" },
{ code: "bn", value: "brunei", label: "Brunei", continent: "Asia" },
{ code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" },
{
code: "bf",
value: "burkina-faso",
label: "Burkina Faso",
continent: "Africa",
},
{ code: "bi", value: "burundi", label: "Burundi", continent: "Africa" },
{ code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" },
{ code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" },
{ code: "ca", value: "canada", label: "Canada", continent: "North America" },
{ code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" },
{
code: "cf",
value: "central-african-republic",
label: "Central African Republic",
continent: "Africa",
},
{ code: "td", value: "chad", label: "Chad", continent: "Africa" },
{ code: "cl", value: "chile", label: "Chile", continent: "South America" },
{ code: "cn", value: "china", label: "China", continent: "Asia" },
{
code: "co",
value: "colombia",
label: "Colombia",
continent: "South America",
},
{ code: "km", value: "comoros", label: "Comoros", continent: "Africa" },
{ code: "cg", value: "congo", label: "Congo", continent: "Africa" },
{
code: "cr",
value: "costa-rica",
label: "Costa Rica",
continent: "North America",
},
{ code: "hr", value: "croatia", label: "Croatia", continent: "Europe" },
{ code: "cu", value: "cuba", label: "Cuba", continent: "North America" },
{ code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" },
{
code: "cz",
value: "czech-republic",
label: "Czech Republic",
continent: "Europe",
},
{ code: "dk", value: "denmark", label: "Denmark", continent: "Europe" },
{ code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" },
{
code: "dm",
value: "dominica",
label: "Dominica",
continent: "North America",
},
{
code: "do",
value: "dominican-republic",
label: "Dominican Republic",
continent: "North America",
},
{
code: "ec",
value: "ecuador",
label: "Ecuador",
continent: "South America",
},
{ code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
{
code: "sv",
value: "el-salvador",
label: "El Salvador",
continent: "North America",
},
{
code: "gq",
value: "equatorial-guinea",
label: "Equatorial Guinea",
continent: "Africa",
},
{ code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" },
{ code: "ee", value: "estonia", label: "Estonia", continent: "Europe" },
{ code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" },
{ code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" },
{ code: "fi", value: "finland", label: "Finland", continent: "Europe" },
{ code: "fr", value: "france", label: "France", continent: "Europe" },
{ code: "ga", value: "gabon", label: "Gabon", continent: "Africa" },
{ code: "gm", value: "gambia", label: "Gambia", continent: "Africa" },
{ code: "ge", value: "georgia", label: "Georgia", continent: "Asia" },
{ code: "de", value: "germany", label: "Germany", continent: "Europe" },
{ code: "gh", value: "ghana", label: "Ghana", continent: "Africa" },
{ code: "gr", value: "greece", label: "Greece", continent: "Europe" },
{
code: "gd",
value: "grenada",
label: "Grenada",
continent: "North America",
},
{
code: "gt",
value: "guatemala",
label: "Guatemala",
continent: "North America",
},
{ code: "gn", value: "guinea", label: "Guinea", continent: "Africa" },
{
code: "gw",
value: "guinea-bissau",
label: "Guinea-Bissau",
continent: "Africa",
},
{ code: "gy", value: "guyana", label: "Guyana", continent: "South America" },
{ code: "ht", value: "haiti", label: "Haiti", continent: "North America" },
{
code: "hn",
value: "honduras",
label: "Honduras",
continent: "North America",
},
{ code: "hu", value: "hungary", label: "Hungary", continent: "Europe" },
{ code: "is", value: "iceland", label: "Iceland", continent: "Europe" },
{ code: "in", value: "india", label: "India", continent: "Asia" },
{ code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" },
{ code: "ir", value: "iran", label: "Iran", continent: "Asia" },
{ code: "iq", value: "iraq", label: "Iraq", continent: "Asia" },
{ code: "ie", value: "ireland", label: "Ireland", continent: "Europe" },
{ code: "il", value: "israel", label: "Israel", continent: "Asia" },
{ code: "it", value: "italy", label: "Italy", continent: "Europe" },
{
code: "jm",
value: "jamaica",
label: "Jamaica",
continent: "North America",
},
{ code: "jp", value: "japan", label: "Japan", continent: "Asia" },
{ code: "jo", value: "jordan", label: "Jordan", continent: "Asia" },
{ code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" },
{ code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
{ code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" },
{ code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" },
{ code: "la", value: "laos", label: "Laos", continent: "Asia" },
{ code: "lv", value: "latvia", label: "Latvia", continent: "Europe" },
{ code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" },
{ code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" },
{ code: "lr", value: "liberia", label: "Liberia", continent: "Africa" },
{ code: "ly", value: "libya", label: "Libya", continent: "Africa" },
{
code: "li",
value: "liechtenstein",
label: "Liechtenstein",
continent: "Europe",
},
{ code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" },
{ code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" },
{ code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" },
{ code: "mw", value: "malawi", label: "Malawi", continent: "Africa" },
{ code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" },
{ code: "mv", value: "maldives", label: "Maldives", continent: "Asia" },
{ code: "ml", value: "mali", label: "Mali", continent: "Africa" },
{ code: "mt", value: "malta", label: "Malta", continent: "Europe" },
{
code: "mh",
value: "marshall-islands",
label: "Marshall Islands",
continent: "Oceania",
},
{ code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" },
{ code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" },
{ code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
{
code: "fm",
value: "micronesia",
label: "Micronesia",
continent: "Oceania",
},
{ code: "md", value: "moldova", label: "Moldova", continent: "Europe" },
{ code: "mc", value: "monaco", label: "Monaco", continent: "Europe" },
{ code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" },
{ code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" },
{ code: "ma", value: "morocco", label: "Morocco", continent: "Africa" },
{ code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" },
{ code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" },
{ code: "na", value: "namibia", label: "Namibia", continent: "Africa" },
{ code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" },
{ code: "np", value: "nepal", label: "Nepal", continent: "Asia" },
{
code: "nl",
value: "netherlands",
label: "Netherlands",
continent: "Europe",
},
{
code: "nz",
value: "new-zealand",
label: "New Zealand",
continent: "Oceania",
},
{
code: "ni",
value: "nicaragua",
label: "Nicaragua",
continent: "North America",
},
{ code: "ne", value: "niger", label: "Niger", continent: "Africa" },
{ code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
{ code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" },
{
code: "mk",
value: "north-macedonia",
label: "North Macedonia",
continent: "Europe",
},
{ code: "no", value: "norway", label: "Norway", continent: "Europe" },
{ code: "om", value: "oman", label: "Oman", continent: "Asia" },
{ code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" },
{ code: "pw", value: "palau", label: "Palau", continent: "Oceania" },
{ code: "ps", value: "palestine", label: "Palestine", continent: "Asia" },
{ code: "pa", value: "panama", label: "Panama", continent: "North America" },
{
code: "pg",
value: "papua-new-guinea",
label: "Papua New Guinea",
continent: "Oceania",
},
{
code: "py",
value: "paraguay",
label: "Paraguay",
continent: "South America",
},
{ code: "pe", value: "peru", label: "Peru", continent: "South America" },
{ code: "ph", value: "philippines", label: "Philippines", continent: "Asia" },
{ code: "pl", value: "poland", label: "Poland", continent: "Europe" },
{ code: "pt", value: "portugal", label: "Portugal", continent: "Europe" },
{ code: "qa", value: "qatar", label: "Qatar", continent: "Asia" },
{ code: "ro", value: "romania", label: "Romania", continent: "Europe" },
{ code: "ru", value: "russia", label: "Russia", continent: "Europe" },
{ code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" },
{ code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" },
{ code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" },
{
code: "sa",
value: "saudi-arabia",
label: "Saudi Arabia",
continent: "Asia",
},
{ code: "sn", value: "senegal", label: "Senegal", continent: "Africa" },
{ code: "rs", value: "serbia", label: "Serbia", continent: "Europe" },
{ code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" },
{
code: "sl",
value: "sierra-leone",
label: "Sierra Leone",
continent: "Africa",
},
{ code: "sg", value: "singapore", label: "Singapore", continent: "Asia" },
{ code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" },
{ code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" },
{
code: "sb",
value: "solomon-islands",
label: "Solomon Islands",
continent: "Oceania",
},
{ code: "so", value: "somalia", label: "Somalia", continent: "Africa" },
{
code: "za",
value: "south-africa",
label: "South Africa",
continent: "Africa",
},
{ code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
{
code: "ss",
value: "south-sudan",
label: "South Sudan",
continent: "Africa",
},
{ code: "es", value: "spain", label: "Spain", continent: "Europe" },
{ code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" },
{ code: "sd", value: "sudan", label: "Sudan", continent: "Africa" },
{
code: "sr",
value: "suriname",
label: "Suriname",
continent: "South America",
},
{ code: "se", value: "sweden", label: "Sweden", continent: "Europe" },
{
code: "ch",
value: "switzerland",
label: "Switzerland",
continent: "Europe",
},
{ code: "sy", value: "syria", label: "Syria", continent: "Asia" },
{ code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" },
{ code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" },
{ code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" },
{ code: "th", value: "thailand", label: "Thailand", continent: "Asia" },
{ code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" },
{ code: "tg", value: "togo", label: "Togo", continent: "Africa" },
{ code: "to", value: "tonga", label: "Tonga", continent: "Oceania" },
{
code: "tt",
value: "trinidad-and-tobago",
label: "Trinidad and Tobago",
continent: "North America",
},
{ code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" },
{ code: "tr", value: "turkey", label: "Turkey", continent: "Asia" },
{
code: "tm",
value: "turkmenistan",
label: "Turkmenistan",
continent: "Asia",
},
{ code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" },
{ code: "ug", value: "uganda", label: "Uganda", continent: "Africa" },
{ code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" },
{
code: "ae",
value: "united-arab-emirates",
label: "United Arab Emirates",
continent: "Asia",
},
{
code: "gb",
value: "united-kingdom",
label: "United Kingdom",
continent: "Europe",
},
{
code: "us",
value: "united-states",
label: "United States",
continent: "North America",
},
{
code: "uy",
value: "uruguay",
label: "Uruguay",
continent: "South America",
},
{ code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" },
{ code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" },
{
code: "va",
value: "vatican-city",
label: "Vatican City",
continent: "Europe",
},
{
code: "ve",
value: "venezuela",
label: "Venezuela",
continent: "South America",
},
{ code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" },
{ code: "ye", value: "yemen", label: "Yemen", continent: "Asia" },
{ code: "zm", value: "zambia", label: "Zambia", continent: "Africa" },
{ code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" },
]
export function ComboboxWithCustomItems() {
return (
<Combobox
items={countries.filter((country) => country.code !== "")}
itemToStringValue={(country: (typeof countries)[number]) => country.label}
>
<ComboboxInput placeholder="Search countries..." />
<ComboboxContent>
<ComboboxEmpty>No countries found.</ComboboxEmpty>
<ComboboxList>
{(country) => (
<ComboboxItem key={country.code} value={country}>
<Item size="xs" className="p-0">
<ItemContent>
<ItemTitle className="whitespace-nowrap">
{country.label}
</ItemTitle>
<ItemDescription>
{country.continent} ({country.code})
</ItemDescription>
</ItemContent>
</Item>
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}

72
apps/v4/examples/radix/combobox-with-form.tsx
View File

@@ -1,72 +0,0 @@
import * as React from "react"
import { Button } from "@/examples/radix/ui/button"
import { Card, CardContent, CardFooter } from "@/examples/radix/ui/card"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
import { Select } from "@/examples/radix/ui/select"
import { toast } from "sonner"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
export function ComboboxWithForm() {
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault()
const formData = new FormData(event.target as HTMLFormElement)
const framework = formData.get("framework") as string
toast(`You selected ${framework} as your framework.`)
}
return (
<Card className="w-full max-w-sm" size="sm">
<CardContent>
<form
id="form-with-combobox"
className="w-full"
onSubmit={handleSubmit}
>
<FieldGroup>
<Field>
<FieldLabel htmlFor="framework">Framework</FieldLabel>
<Combobox items={frameworks}>
<ComboboxInput
id="framework"
name="framework"
placeholder="Select a framework"
required
/>
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
</Field>
</FieldGroup>
</form>
</CardContent>
<CardFooter>
<Button type="submit" form="form-with-combobox">
Submit
</Button>
</CardFooter>
</Card>
)
}

80
apps/v4/examples/radix/combobox-with-other-inputs.tsx
View File

@@ -1,80 +0,0 @@
import { Button } from "@/examples/radix/ui/button"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/examples/radix/ui/combobox"
import { Input } from "@/examples/radix/ui/input"
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/examples/radix/ui/input-group"
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/examples/radix/ui/select"
import { ChevronDownIcon } from "lucide-react"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
] as const
export function ComboboxWithOtherInputs() {
return (
<>
<Combobox items={frameworks}>
<ComboboxInput placeholder="Select a framework" className="w-52" />
<ComboboxContent>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
<Select>
<SelectTrigger className="w-52">
<SelectValue placeholder="Select a framework" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{frameworks.map((framework) => (
<SelectItem key={framework} value={framework}>
{framework}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<Button
variant="outline"
className="text-muted-foreground w-52 justify-between font-normal"
>
Select a framework
<ChevronDownIcon />
</Button>
<Input placeholder="Select a framework" className="w-52" />
<InputGroup className="w-52">
<InputGroupInput placeholder="Select a framework" />
<InputGroupAddon align="inline-end">
<ChevronDownIcon />
</InputGroupAddon>
</InputGroup>
</>
)
}