ComboboxWithForm() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ComboboxWithForm() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/combobox-example.tsx lines 773–823

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 (
    <Example title="Form with Combobox">
      <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>
    </Example>
  )
}