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

## Checkbox

<form>
  <label class="control checkbox error">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox Error</span>
  </label>
  <label class="control checkbox warning">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox Warning</span>
  </label>
  <label class="control checkbox success">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox Success</span>
  </label>
  <label class="control checkbox info">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox Info</span>
  </label>
</form>

### HTML

```html
<label class="control checkbox error">...</label>
<label class="control checkbox warning">...</label>
<label class="control checkbox success">...</label>
<label class="control checkbox info">...</label>
```

## Radio

<form>
  <label class="control radio error">
    <input type="radio" name="radio 1" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Radio Error</span>
  </label>
  <label class="control radio warning">
    <input type="radio" name="radio 2" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Radio Warning</span>
  </label>
  <label class="control radio success">
    <input type="radio" name="radio 3" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Radio Succcess</span>
  </label>
  <label class="control radio info">
    <input type="radio" name="radio 4" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Radio Info</span>
  </label>
</form>

### HTML

```html
<label class="control radio error">...</label>
<label class="control radio warning">...</label>
<label class="control radio success">...</label>
<label class="control radio info">...</label>
```

## Switch

<form>
  <label class="control switch error">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Switch Error</span>
  </label>
  <label class="control switch warning">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Switch Warning</span>
  </label>
  <label class="control switch success">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Switch Success</span>
  </label>
  <label class="control switch info">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Switch Info</span>
  </label>
</form>

### HTML

```html
<label class="control switch error">...</label>
<label class="control switch warning">...</label>
<label class="control switch success">...</label>
<label class="control switch info">...</label>
```