# combobox — Examples

## basic

```html
<field-ui label="Country">
  <combobox-ui name="country" placeholder="Select country…">
    <option value="us">United States</option>
    <option value="gb">United Kingdom</option>
    <option value="de">Germany</option>
    <option value="fr">France</option>
    <option value="es">Spain</option>
    <option value="it">Italy</option>
  </combobox-ui>
</field-ui>
```

## grouped options

```html
<field-ui label="Location">
  <combobox-ui placeholder="Choose a city">
    <optgroup label="Americas">
      <option value="nyc">New York</option>
      <option value="sf">San Francisco</option>
    </optgroup>
    <optgroup label="Europe">
      <option value="london">London</option>
      <option value="paris">Paris</option>
    </optgroup>
  </combobox-ui>
</field-ui>
```

## creatable tag picker

```html
<field-ui label="Tag">
  <combobox-ui name="tag" creatable placeholder="Pick or create a tag…">
    <option value="bug">bug</option>
    <option value="feature">feature</option>
    <option value="chore">chore</option>
  </combobox-ui>
</field-ui>
```

Typing "regression" + Enter fires the `create` event with `detail.value === "regression"`.

## clearable

```html
<field-ui label="Role">
  <combobox-ui clearable value="user" placeholder="Pick a role…">
    <option value="user">User</option>
    <option value="admin">Admin</option>
    <option value="guest">Guest</option>
  </combobox-ui>
</field-ui>
```
