2c:I[378303,["/_next/static/chunks/3f973cikg0z9p.js","/_next/static/chunks/1igbpzagpvi1l.js","/_next/static/chunks/2rtx4oofog2ow.js","/_next/static/chunks/0zqr6qscpxzy_.js","/_next/static/chunks/1k6tj87d1l2z4.js","/_next/static/chunks/41jod2ec4qagc.js","/_next/static/chunks/2vnuoq_5b7wsc.js","/_next/static/chunks/3jhchi5tt3lfv.js","/_next/static/chunks/1r2ozj9-ltiao.js","/_next/static/chunks/2u5h26vx2fmkk.js","/_next/static/chunks/2wzm1c51hzc8g.js","/_next/static/chunks/062evay-qvrz2.js","/_next/static/chunks/3kexzvncaevr-.js","/_next/static/chunks/3umntt2ceu7kv.js","/_next/static/chunks/3ulgqz3r9-nzj.js","/_next/static/chunks/3-01s9my0f__n.js","/_next/static/chunks/2i9mi0qutz1ww.js","/_next/static/chunks/0nri49zi0q0qa.js","/_next/static/chunks/2ot7c1d1dxokk.js","/_next/static/chunks/34km4lc1pzv1d.js","/_next/static/chunks/1spxzhiz9fgfc.js","/_next/static/chunks/1wareq7_rla84.js","/_next/static/chunks/27l3c-l52sasj.js","/_next/static/chunks/3-m94dhfkx6xl.js","/_next/static/chunks/3illacb2t7eeu.js","/_next/static/chunks/3q5_wd-zocont.js","/_next/static/chunks/2a6v7j49fw4u8.js","/_next/static/chunks/1ara7piiifk2w.js","/_next/static/chunks/04nxscdrimn9z.js","/_next/static/chunks/2sxqek2q2z1_1.js","/_next/static/chunks/3ndlo4ncip5pp.js","/_next/static/chunks/02tdfy9ttger-.js","/_next/static/chunks/221nx-pect-i7.js","/_next/static/chunks/17u6xof7n5ooq.js","/_next/static/chunks/2x435wabinu4k.js","/_next/static/chunks/0ama9zd0m-obv.js"],"PageEntrance"] 2d:I[378303,["/_next/static/chunks/3f973cikg0z9p.js","/_next/static/chunks/1igbpzagpvi1l.js","/_next/static/chunks/2rtx4oofog2ow.js","/_next/static/chunks/0zqr6qscpxzy_.js","/_next/static/chunks/1k6tj87d1l2z4.js","/_next/static/chunks/41jod2ec4qagc.js","/_next/static/chunks/2vnuoq_5b7wsc.js","/_next/static/chunks/3jhchi5tt3lfv.js","/_next/static/chunks/1r2ozj9-ltiao.js","/_next/static/chunks/2u5h26vx2fmkk.js","/_next/static/chunks/2wzm1c51hzc8g.js","/_next/static/chunks/062evay-qvrz2.js","/_next/static/chunks/3kexzvncaevr-.js","/_next/static/chunks/3umntt2ceu7kv.js","/_next/static/chunks/3ulgqz3r9-nzj.js","/_next/static/chunks/3-01s9my0f__n.js","/_next/static/chunks/2i9mi0qutz1ww.js","/_next/static/chunks/0nri49zi0q0qa.js","/_next/static/chunks/2ot7c1d1dxokk.js","/_next/static/chunks/34km4lc1pzv1d.js","/_next/static/chunks/1spxzhiz9fgfc.js","/_next/static/chunks/1wareq7_rla84.js","/_next/static/chunks/27l3c-l52sasj.js","/_next/static/chunks/3-m94dhfkx6xl.js","/_next/static/chunks/3illacb2t7eeu.js","/_next/static/chunks/3q5_wd-zocont.js","/_next/static/chunks/2a6v7j49fw4u8.js","/_next/static/chunks/1ara7piiifk2w.js","/_next/static/chunks/04nxscdrimn9z.js","/_next/static/chunks/2sxqek2q2z1_1.js","/_next/static/chunks/3ndlo4ncip5pp.js","/_next/static/chunks/02tdfy9ttger-.js","/_next/static/chunks/221nx-pect-i7.js","/_next/static/chunks/17u6xof7n5ooq.js","/_next/static/chunks/2x435wabinu4k.js","/_next/static/chunks/0ama9zd0m-obv.js"],"RevealText"] 2e:I[871255,["/_next/static/chunks/3f973cikg0z9p.js","/_next/static/chunks/1igbpzagpvi1l.js","/_next/static/chunks/2rtx4oofog2ow.js","/_next/static/chunks/0zqr6qscpxzy_.js","/_next/static/chunks/1k6tj87d1l2z4.js","/_next/static/chunks/41jod2ec4qagc.js","/_next/static/chunks/2vnuoq_5b7wsc.js","/_next/static/chunks/3jhchi5tt3lfv.js","/_next/static/chunks/1r2ozj9-ltiao.js","/_next/static/chunks/2u5h26vx2fmkk.js","/_next/static/chunks/2wzm1c51hzc8g.js","/_next/static/chunks/062evay-qvrz2.js","/_next/static/chunks/3kexzvncaevr-.js","/_next/static/chunks/3umntt2ceu7kv.js","/_next/static/chunks/3ulgqz3r9-nzj.js","/_next/static/chunks/3-01s9my0f__n.js","/_next/static/chunks/2i9mi0qutz1ww.js","/_next/static/chunks/0nri49zi0q0qa.js","/_next/static/chunks/2ot7c1d1dxokk.js","/_next/static/chunks/34km4lc1pzv1d.js","/_next/static/chunks/1spxzhiz9fgfc.js","/_next/static/chunks/1wareq7_rla84.js","/_next/static/chunks/27l3c-l52sasj.js","/_next/static/chunks/3-m94dhfkx6xl.js","/_next/static/chunks/3illacb2t7eeu.js","/_next/static/chunks/3q5_wd-zocont.js","/_next/static/chunks/2a6v7j49fw4u8.js","/_next/static/chunks/1ara7piiifk2w.js","/_next/static/chunks/04nxscdrimn9z.js","/_next/static/chunks/2sxqek2q2z1_1.js","/_next/static/chunks/3ndlo4ncip5pp.js","/_next/static/chunks/02tdfy9ttger-.js","/_next/static/chunks/221nx-pect-i7.js","/_next/static/chunks/17u6xof7n5ooq.js","/_next/static/chunks/2x435wabinu4k.js","/_next/static/chunks/0ama9zd0m-obv.js"],"ExampleViewer"] 2f:T49a,"use client"; import { useState } from "react"; import { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxEmpty, } from "@/components/ui/combobox"; import { Label } from "@/components/ui/label"; const items = ["Design", "Engineering", "Marketing", "Operations", "Support"]; export default function ComboboxExample() { const [value, setValue] = useState(null); return (

Team No teams found. {(item: string) => ( {item} )}

Selected: {value ?? "None"}

); } 30:T23e6,// src/components/ui/combobox.tsx "use client" import * as React from "react" import { Combobox as ComboboxPrimitive } from "@base-ui/react" import { cn } from "cn" import { Button } from "@/components/ui/button" import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group" import { ChevronDown } from "pixelarticons/react/ChevronDown.js"; import { Close } from "pixelarticons/react/Close.js"; import { Check } from "pixelarticons/react/Check.js"; const Combobox = ComboboxPrimitive.Root function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) { return } function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) { return ( {children} ) } function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) { return ( } className={cn(className)} {...props} > ) } function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }: ComboboxPrimitive.Input.Props & { showTrigger?: boolean showClear?: boolean }) { return ( } {...props} /> {showTrigger && ( } data-slot="input-group-button" className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent" disabled={disabled} /> )} {showClear && } {children} ) } function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick< ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor" >) { return ( ) } function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) { return ( ) } function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) { return ( {children} } > ) } function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) { return ( ) } function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) { return ( ) } function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) { return ( ) } function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) { return ( ) } function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) { return ( ) } function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef & ComboboxPrimitive.Chips.Props) { return ( ) } function ComboboxChip({ className, children, showRemove = true, ...props }: ComboboxPrimitive.Chip.Props & { showRemove?: boolean }) { return ( {children} {showRemove && ( } className="-ml-1 opacity-50 hover:opacity-100" data-slot="combobox-chip-remove" > )} ) } function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) { return ( ) } function useComboboxAnchor() { return React.useRef(null) } export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, } 24:[["$","$L2c","combobox",{"className":"mx-auto max-w-5xl","children":[["$","$L1e",null,{"children":["$","p",null,{"className":"mb-5 font-mono text-xs uppercase tracking-widest text-accent-500","children":"Forms"}]}],["$","$L2d",null,{"as":"h1","text":"Combobox","className":"text-4xl font-medium tracking-tight sm:text-5xl"}],["$","$L1e",null,{"order":1,"children":[["$","p",null,{"className":"mt-4 max-w-2xl text-base leading-7 text-muted-foreground","children":"Search a list, choose an option, or clear your selection."}],"$undefined","$undefined",["$","p",null,{"className":"mt-3 break-all font-mono text-xs text-muted-foreground","children":"src/components/ui/combobox.tsx"}]]}],["$","$L1e",null,{"order":2,"children":["$","$L2e",null,{"source":"$2f","componentSource":"$30","children":"$L31"}]}],"$L32","$L33"]}]]

ComboboxCombobox

Built from the app library

Try every state

ComboboxCombobox

Built from the app library

Try every state

Combobox

Combobox