---
layout: docs
title: Select Indicators
description: null
---

## Example

<form>
  <p class="field">
    <label class="select error" for="select-error">
      <select id="select-error">
        <option>Select Error</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">
    <label class="select warning" for="select-warning">
      <select id="select-warning">
        <option>Select Warning</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">
    <label class="select success" for="select-success">
      <select id="select-success">
        <option>Select Success</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">
    <label class="select info" for="select-info">
      <select id="select-info">
        <option>Select Info</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
</form>

### HTML

```html
<label class="select error" for="select-error">
  <select id="select-error">
    ...
  </select>
</label>

<label class="select warning" for="select-warning">
  <select id="select-warning">
    ...
  </select>
</label>

<label class="select success" for="select-success">
  <select id="select-success">
    ...
  </select>
</label>

<label class="select select-s" for="select-s">
  <select id="select-s">
    ...
  </select>
</label>

<label class="select info" for="select-info">
  <select id="select-info">
    ...
  </select>
</label>
```