ComboboxInDialog() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ComboboxInDialog() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/combobox-example.tsx lines 1130–1189

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

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