--- layout: default title: "Switcher - Sleek Admin Dashboard Template" parent: "components" sub_parent: "components" activePage: "switcher" plugins: [] ---

# Switcher

{% include breadcrumb.htm %}

To use switcher copy the following code snippet.

    	<label class="switch switch-primary form-control-label">
    		<input type="checkbox" class="switch-input form-check-input" value="on" checked>
    		<span class="switch-label"></span>
    		<span class="switch-handle"></span>
    	</label>

## Switch Default

For switch Add class `.switch-*` to `<label class="switch">`

## Switch Default Pills

For switch pills Add class `.switch-pill switch-*` to `<label class="switch">`

## Switch Outline

For switch outline Add class `.switch-outline-*` to `<label class="switch">`

## Switch Outline Pills

For switch outline pill Add class `.switch-pill .switch-outline-*` to `<label class="switch">`

## Switch Outline Alternative

For switch outline Alternative Add class `.switch-outline-alt-*` to `<label class="switch">`

## Switch Outline Alternative Pills

For switch outline Alternative pill Add class `.switch-pill .switch-outline-alt-*` to `<label class="switch">`

## Switch with Text

For switch with text Add class `.switch-text` to `<label class="switch">`

## Switch with Text Pills

For switch with text pill Add class `.switch-pill .switch-text .switch-*` to `<label class="switch">`

## Switch with Text Outline

For switch with text outline Add class `.switch-text .switch-outline-*` to `<label class="switch">`

## Switch with Text Outline Pills

For switch with text outline pill Add class `.switch-pill .switch-text .switch-outline-*` to `<label class="switch">`

## Switch with Text Alternative Outline

For switch with text alternative outline Add class `.switch-text .switch-outline-alt-*` to `<label class="switch">`

## Switch with Text Outline Alternative Pills

For switch with text outline alternative pill Add class `.switch-pill .switch-text .switch-outline-alt-*` to `<label class="switch">`

## Switch with Icon

For switch with icon Add class `.switch-icon .switch-*` to `<label class="switch">`

## Switch with Icon Pills

For switch with icon pill Add class `.switch-pill .switch-icon .switch-*` to `<label class="switch">`

## Switch with Icon Outline

For switch with icon outline Add class `.switch-icon .switch-outline-*` to `<label class="switch">`

## Switch with Icon Outline Pills

For switch with icon outline pill Add class `.switch-pill .switch-icon .switch-outline-*` to `<label class="switch">`

## Switch with Icon Outline Alternative

For switch with icon outline alternative Add class `.switch-icon .switch-outline-alt-*` to `<label class="switch">`

## Switch with Icon Outline Alternative Pills

For switch with icon outline alternative pill Add class `.switch-icon .switch-pill .switch-outline-alt-*` to `<label class="switch">`