ComboboxWithForm() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ComboboxWithForm() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/combobox-example.tsx lines 736–786

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>
  )
}