# select — Examples

## basic

```html
<field-ui label="Fruit">
  <select-ui placeholder="Pick a fruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
    <option value="dragonfruit">Dragonfruit</option>
  </select-ui>
</field-ui>
```

## size

```html
<field-ui label="Small">
  <select-ui size="sm" placeholder="Pick a fruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select-ui>
</field-ui>
```

## grouped options

```html
<field-ui label="Location">
  <select-ui placeholder="Choose a city">
    <optgroup label="North America">
      <option value="nyc">New York</option>
      <option value="sf">San Francisco</option>
      <option value="toronto">Toronto</option>
    </optgroup>
    <optgroup label="Europe">
      <option value="london">London</option>
      <option value="paris">Paris</option>
      <option value="berlin">Berlin</option>
    </optgroup>
    <optgroup label="Asia">
      <option value="tokyo">Tokyo</option>
      <option value="singapore">Singapore</option>
    </optgroup>
  </select-ui>
</field-ui>
```
