# Usage: v1.0.0.066

This is the usage guide for [BSFormControls4](/bootstrap-bsformcontrols4), version 1.0.0.066.

## Usage

### Horizontal toggle switch

This horizontally-oriented toggle switch is actually just a checkbox. You can apply stock BS4 colours to the on and off positions using the classes below.

#### Colour Options

CSS class for colour in the off position: **switch-off-primary**, **switch-off-success**, **switch-off-info**, **switch-off-warning**, **switch-off-danger** and **switch-off-muted**.

CSS class for colour in the on position: **switch-primary**, **switch-success**, **switch-info**, **switch-warning**, **switch-danger** and **switch-muted**.

#### Size Options

We have the standard set of size options: **switch-sm**, **switch-md** and **switch-lg**.

#### Example

```html
  <div class="mb-3 row">
	<label for="switch6" class="col-sm-4 col-form-label-sm">Toggle Switch</label>
	<div class="col-sm-8">
	  <label class="switch switch-sm switch-primary">
		<input id="switch6" type="checkbox" />
		<span class="switch-slider"></span>
	  </label>
	</div>
  </div>

  <div class="mb-3 row">
	<label for="switch2" class="col-sm-4 col-form-label">Toggle Switch</label>
	<div class="col-sm-8">
	  <label class="switch switch-primary">
		<input id="switch2" type="checkbox" />
		<span class="switch-slider"></span>
	  </label>
	</div>
  </div>

  <div class="mb-3 row">
	<label for="switch1" class="col-sm-4 col-form-label-lg">Toggle Switch</label>
	<div class="col-sm-8">
	  <label class="switch switch-lg switch-primary">
		<input id="switch1" type="checkbox" />
		<span class="switch-slider"></span>
	  </label>
	</div>
  </div>
```

### Checkbox

This a style consistent checkbox.

#### Colour Options

CSS class for colour in the off position: **chxbox-off-primary**, **chxbox-off-success**, **chxbox-off-info**, **chxbox-off-warning**, **chxbox-off-danger** and **chxbox-off-muted**.

CSS class for colour in the off position: **chxbox-primary**, **chxbox-success**, **chxbox-info**, **chxbox-warning**, **chxbox-danger** and **chxbox-muted**.

#### Size Options

We have the standard set of size options: **chxbox-sm**, **chxbox-md** and **chxbox-lg**.

#### Example

```html
  <div class="mb-3 row">
	<label for="checkbox1" class="col-sm-4 col-form-label-sm">Toggle Checkbox</label>
	<div class="col-sm-8">
	  <label class="chxbox chxbox-sm">
		<input id="checkbox1" type="checkbox" />
		<span class="chxbox-slider"></span>
	  </label>
	</div>
  </div>

  <div class="mb-3 row">
	<label for="checkbox2" class="col-sm-4 col-form-label">Toggle Checkbox</label>
	<div class="col-sm-8">
	  <label class="chxbox">
		<input id="checkbox2" type="checkbox" />
		<span class="chxbox-slider"></span>
	  </label>
	</div>
  </div>

  <div class="mb-3 row">
	<label for="checkbox3" class="col-sm-4 col-form-label-lg">Toggle Checkbox</label>
	<div class="col-sm-8">
	  <label class="chxbox chxbox-lg">
		<input id="checkbox3" type="checkbox" />
		<span class="chxbox-slider"></span>
	  </label>
	</div>
  </div>
```