ComboboxInDialog() — ui Function Reference

Architecture documentation for the ComboboxInDialog() function in combobox-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ComboboxInDialog() — ui Function Reference

Dependency Diagram

graph TD
  32355d3c_e6cf_d233_ec31_13c7edea92ab["ComboboxInDialog()"]
  08c943e1_cbb3_6c4d_0fd2_1693e54a1d0a["combobox-example.tsx"]
  32355d3c_e6cf_d233_ec31_13c7edea92ab -->|defined in| 08c943e1_cbb3_6c4d_0fd2_1693e54a1d0a
  style 32355d3c_e6cf_d233_ec31_13c7edea92ab fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/combobox-example.tsx lines 1167–1226

function ComboboxInDialog() {
  const [open, setOpen] = React.useState(false)

  return (
    <Example title="Combobox in Dialog">
      <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>
    </Example>
  )
}