# Combobox: Trigger rendered as a Button

> Pass `render` to the trigger to use any button. The popup anchors to it and keeps at least its width.

Example: https://hextaui.com/docs/combobox/examples/button-trigger
Component docs: https://hextaui.com/docs/combobox.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/combobox-button-trigger.json
```

This adds `components/examples/combobox/button-trigger.tsx` with the Combobox component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/combobox/button-trigger.tsx"
"use client"

import { Button } from "@/components/ui/button"
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxTrigger,
  ComboboxValue,
} from "@/components/ui/combobox"

const countries = [
  { value: "ar", label: "Argentina" },
  { value: "au", label: "Australia" },
  { value: "br", label: "Brazil" },
  { value: "ca", label: "Canada" },
  { value: "de", label: "Germany" },
  { value: "fr", label: "France" },
  { value: "in", label: "India" },
  { value: "jp", label: "Japan" },
  { value: "mx", label: "Mexico" },
  { value: "nl", label: "Netherlands" },
  { value: "uk", label: "United Kingdom" },
  { value: "us", label: "United States" },
]

export function ComboboxButtonTrigger() {
  return (
    <Combobox items={countries} defaultValue={countries[6]}>
      <ComboboxTrigger
        aria-label="Country"
        render={<Button variant="outline" />}
      >
        <ComboboxValue />
      </ComboboxTrigger>
      <ComboboxContent>
        <ComboboxInput placeholder="Search countries" />
        <ComboboxEmpty>No country found.</ComboboxEmpty>
        <ComboboxList>
          {(item: (typeof countries)[number]) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}
```

## Props in this example

### Combobox

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `Item[] \| Group[]` | – | The options. Filtered as you type and passed to the list’s render function. |
| `defaultValue` | `Value \| Value[] \| null` | – |  |

### ComboboxInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `string` | – |  |

### ComboboxTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` | When set, the built-in field styles are skipped. |

### ComboboxItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Item` | – | The item this row represents. |

## More Combobox examples

- [Clear button](https://hextaui.com/docs/combobox/examples/clear.md)
- [With icons](https://hextaui.com/docs/combobox/examples/icons.md)
- [Groups and separators](https://hextaui.com/docs/combobox/examples/groups.md)
- [Multiple](https://hextaui.com/docs/combobox/examples/multiple.md)
- [Search inside the popup](https://hextaui.com/docs/combobox/examples/popup-search.md)
- [Controlled](https://hextaui.com/docs/combobox/examples/controlled.md)
- [Disabled, invalid and disabled items](https://hextaui.com/docs/combobox/examples/states.md)
- [Long content and large lists](https://hextaui.com/docs/combobox/examples/long-content.md)
- [Async search](https://hextaui.com/docs/combobox/examples/async.md)
- [Inside a sheet](https://hextaui.com/docs/combobox/examples/sheet.md)
- [Right to left](https://hextaui.com/docs/combobox/examples/rtl.md)