snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)
This commit is contained in:
upstream-mirror
554
apps/v4/registry/bases/radix/examples/select-example.tsx
Normal file
554
apps/v4/registry/bases/radix/examples/select-example.tsx
Normal file
@@ -0,0 +1,554 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import {
|
||||
Example,
|
||||
ExampleWrapper,
|
||||
} from "@/registry/bases/radix/components/example"
|
||||
import { Button } from "@/registry/bases/radix/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/registry/bases/radix/ui/dialog"
|
||||
import {
|
||||
Field,
|
||||
FieldDescription,
|
||||
FieldError,
|
||||
FieldLabel,
|
||||
} from "@/registry/bases/radix/ui/field"
|
||||
import { Input } from "@/registry/bases/radix/ui/input"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemTitle,
|
||||
} from "@/registry/bases/radix/ui/item"
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOption,
|
||||
} from "@/registry/bases/radix/ui/native-select"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/registry/bases/radix/ui/select"
|
||||
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
||||
|
||||
export default function SelectExample() {
|
||||
return (
|
||||
<ExampleWrapper>
|
||||
<SelectBasic />
|
||||
<SelectWithIcons />
|
||||
<SelectWithGroups />
|
||||
<SelectLargeList />
|
||||
<SelectSizes />
|
||||
<SelectPlan />
|
||||
<SelectWithButton />
|
||||
<SelectItemAligned />
|
||||
<SelectWithField />
|
||||
<SelectInvalid />
|
||||
<SelectInline />
|
||||
<SelectDisabled />
|
||||
<SelectInDialog />
|
||||
</ExampleWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectBasic() {
|
||||
return (
|
||||
<Example title="Basic">
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
<SelectItem value="grapes" disabled>
|
||||
Grapes
|
||||
</SelectItem>
|
||||
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectWithIcons() {
|
||||
return (
|
||||
<Example title="With Icons">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Select>
|
||||
<SelectTrigger size="sm">
|
||||
<SelectValue
|
||||
placeholder={
|
||||
<>
|
||||
<IconPlaceholder
|
||||
lucide="ChartLineIcon"
|
||||
tabler="IconChartLine"
|
||||
hugeicons="Chart03Icon"
|
||||
phosphor="ChartLineIcon"
|
||||
remixicon="RiLineChartLine"
|
||||
/>
|
||||
Chart Type
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="line">
|
||||
<IconPlaceholder
|
||||
lucide="ChartLineIcon"
|
||||
tabler="IconChartLine"
|
||||
hugeicons="Chart03Icon"
|
||||
phosphor="ChartBarIcon"
|
||||
remixicon="RiBarChartLine"
|
||||
/>
|
||||
Line
|
||||
</SelectItem>
|
||||
<SelectItem value="bar">
|
||||
<IconPlaceholder
|
||||
lucide="ChartBarIcon"
|
||||
tabler="IconChartBar"
|
||||
hugeicons="Chart03Icon"
|
||||
phosphor="ChartBarIcon"
|
||||
remixicon="RiBarChartLine"
|
||||
/>
|
||||
Bar
|
||||
</SelectItem>
|
||||
<SelectItem value="pie">
|
||||
<IconPlaceholder
|
||||
lucide="ChartPieIcon"
|
||||
tabler="IconChartPie"
|
||||
hugeicons="Chart03Icon"
|
||||
phosphor="ChartPieIcon"
|
||||
remixicon="RiPieChartLine"
|
||||
/>
|
||||
Pie
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select>
|
||||
<SelectTrigger size="default">
|
||||
<SelectValue
|
||||
placeholder={
|
||||
<>
|
||||
<IconPlaceholder
|
||||
lucide="ChartLineIcon"
|
||||
tabler="IconChartLine"
|
||||
hugeicons="Chart03Icon"
|
||||
phosphor="ChartLineIcon"
|
||||
remixicon="RiLineChartLine"
|
||||
/>
|
||||
Chart Type
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="line">
|
||||
<IconPlaceholder
|
||||
lucide="ChartLineIcon"
|
||||
tabler="IconChartLine"
|
||||
hugeicons="Chart03Icon"
|
||||
phosphor="ChartLineIcon"
|
||||
remixicon="RiLineChartLine"
|
||||
/>
|
||||
Line
|
||||
</SelectItem>
|
||||
<SelectItem value="bar">
|
||||
<IconPlaceholder
|
||||
lucide="ChartBarIcon"
|
||||
tabler="IconChartBar"
|
||||
hugeicons="Chart03Icon"
|
||||
phosphor="ChartBarIcon"
|
||||
remixicon="RiBarChartLine"
|
||||
/>
|
||||
Bar
|
||||
</SelectItem>
|
||||
<SelectItem value="pie">
|
||||
<IconPlaceholder
|
||||
lucide="ChartPieIcon"
|
||||
tabler="IconChartPie"
|
||||
hugeicons="Chart03Icon"
|
||||
phosphor="ChartPieIcon"
|
||||
remixicon="RiPieChartLine"
|
||||
/>
|
||||
Pie
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectWithGroups() {
|
||||
return (
|
||||
<Example title="With Groups & Labels">
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Fruits</SelectLabel>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectSeparator />
|
||||
<SelectGroup>
|
||||
<SelectLabel>Vegetables</SelectLabel>
|
||||
<SelectItem value="carrot">Carrot</SelectItem>
|
||||
<SelectItem value="broccoli">Broccoli</SelectItem>
|
||||
<SelectItem value="spinach">Spinach</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLargeList() {
|
||||
return (
|
||||
<Example title="Large List">
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an item" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{Array.from({ length: 100 }).map((_, i) => (
|
||||
<SelectItem key={i} value={`item-${i}`}>
|
||||
Item {i}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSizes() {
|
||||
return (
|
||||
<Example title="Sizes">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Select>
|
||||
<SelectTrigger size="sm">
|
||||
<SelectValue placeholder="Small size" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select>
|
||||
<SelectTrigger size="default">
|
||||
<SelectValue placeholder="Default size" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectWithButton() {
|
||||
return (
|
||||
<Example title="With Button">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Select>
|
||||
<SelectTrigger size="sm">
|
||||
<SelectValue placeholder="Small" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" size="sm">
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Default" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline">Submit</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItemAligned() {
|
||||
return (
|
||||
<Example title="Popper">
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent position="popper">
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
<SelectItem value="grapes" disabled>
|
||||
Grapes
|
||||
</SelectItem>
|
||||
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectWithField() {
|
||||
return (
|
||||
<Example title="With Field">
|
||||
<Field>
|
||||
<FieldLabel htmlFor="select-fruit">Favorite Fruit</FieldLabel>
|
||||
<Select>
|
||||
<SelectTrigger id="select-fruit">
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
<SelectItem value="grapes">Grapes</SelectItem>
|
||||
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FieldDescription>
|
||||
Choose your favorite fruit from the list.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectInvalid() {
|
||||
return (
|
||||
<Example title="Invalid">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Select>
|
||||
<SelectTrigger aria-invalid="true">
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
<SelectItem value="grapes">Grapes</SelectItem>
|
||||
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Field data-invalid>
|
||||
<FieldLabel htmlFor="select-fruit-invalid">Favorite Fruit</FieldLabel>
|
||||
<Select>
|
||||
<SelectTrigger id="select-fruit-invalid" aria-invalid>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
<SelectItem value="grapes">Grapes</SelectItem>
|
||||
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FieldError errors={[{ message: "Please select a valid fruit." }]} />
|
||||
</Field>
|
||||
</div>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectInline() {
|
||||
return (
|
||||
<Example title="Inline with Input & NativeSelect">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input placeholder="Search..." className="flex-1" />
|
||||
<Select>
|
||||
<SelectTrigger className="w-[140px]">
|
||||
<SelectValue placeholder="Filter" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="all">All</SelectItem>
|
||||
<SelectItem value="active">Active</SelectItem>
|
||||
<SelectItem value="inactive">Inactive</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<NativeSelect className="w-[140px]">
|
||||
<NativeSelectOption value="">Sort by</NativeSelectOption>
|
||||
<NativeSelectOption value="name">Name</NativeSelectOption>
|
||||
<NativeSelectOption value="date">Date</NativeSelectOption>
|
||||
<NativeSelectOption value="status">Status</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
</div>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectDisabled() {
|
||||
return (
|
||||
<Example title="Disabled">
|
||||
<Select disabled>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Disabled" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
<SelectItem value="grapes" disabled>
|
||||
Grapes
|
||||
</SelectItem>
|
||||
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: "Starter",
|
||||
description: "Perfect for individuals getting started.",
|
||||
},
|
||||
{
|
||||
name: "Professional",
|
||||
description: "Ideal for growing teams and businesses.",
|
||||
},
|
||||
{
|
||||
name: "Enterprise",
|
||||
description: "Advanced features for large organizations.",
|
||||
},
|
||||
]
|
||||
|
||||
function SelectPlan() {
|
||||
const [plan, setPlan] = React.useState<string>(plans[0].name)
|
||||
|
||||
const selectedPlan = plans.find((p) => p.name === plan)
|
||||
|
||||
return (
|
||||
<Example title="Subscription Plan">
|
||||
<Select value={plan} onValueChange={setPlan}>
|
||||
<SelectTrigger className="h-auto! w-72">
|
||||
<SelectValue>
|
||||
{selectedPlan && <SelectPlanItem plan={selectedPlan} />}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{plans.map((plan) => (
|
||||
<SelectItem key={plan.name} value={plan.name}>
|
||||
<SelectPlanItem plan={plan} />
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {
|
||||
return (
|
||||
<Item size="xs" className="w-full p-0">
|
||||
<ItemContent className="gap-0 normal-case">
|
||||
<ItemTitle className="font-sans">{plan.name}</ItemTitle>
|
||||
<ItemDescription className="text-xs font-normal tracking-normal">
|
||||
{plan.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectInDialog() {
|
||||
return (
|
||||
<Example title="In Dialog">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Open Dialog</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Select Example</DialogTitle>
|
||||
<DialogDescription>
|
||||
Use the select below to choose a fruit.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
<SelectItem value="grapes">Grapes</SelectItem>
|
||||
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user