Canvas Docs

Radios & Switches

Radios & Switches

Canvas provides three styled form controls: toggle switches powered by a bundled Bootstrap switch plugin (.bt-switch), pure CSS slide toggles (.switch-toggle), and custom styled radio buttons (.radio-style). All render consistently across browsers without extra markup wrappers.

Setup

Include the switch and radio/checkbox stylesheets in the <head>. The .bt-switch control is initialized automatically by the bundled Canvas scripts.

<!-- In <head> -->
<link rel="stylesheet" href="css/components/bs-switches.css"><!-- Bootstrap Switch CSS -->
<link rel="stylesheet" href="css/components/radio-checkbox.css"><!-- Radio Checkbox Plugin -->

Structure

Toggle switch (.bt-switch)

Add .bt-switch to a checkbox. Configure color, size, and state via data-* attributes.

<!-- Default on -->
<input type="checkbox" class="bt-switch" checked>

<!-- Disabled and readonly -->
<input class="bt-switch" type="checkbox" checked disabled>
<input class="bt-switch" type="checkbox" checked readonly>

<!-- Mini size and colors -->
<input class="bt-switch" type="checkbox" checked data-size="mini">
<input class="bt-switch" type="checkbox" checked data-on-color="success">
<input class="bt-switch" type="checkbox" data-off-color="danger">

<!-- Indeterminate and inverse -->
<input class="bt-switch" type="checkbox" checked data-indeterminate="true">
<input class="bt-switch" type="checkbox" checked data-inverse="true">

CSS slide toggle (.switch-toggle)

A lightweight, script free toggle. Combine .switch-toggle with a shape modifier and a size modifier.

<input id="switch-toggle-1" class="switch-toggle switch-rounded-mini switch-toggle-round" type="checkbox">
<input id="switch-toggle-2" class="switch-toggle switch-toggle-round" type="checkbox">
<input id="switch-toggle-3" class="switch-toggle switch-rounded-large switch-toggle-round" type="checkbox">

<input id="switch-toggle-5" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
<input id="switch-toggle-6" class="switch-toggle switch-toggle-flat" type="checkbox">

Styled radio buttons (.radio-style)

Add .radio-style to a radio input and pair it with a <label> carrying a style label class. Group radios with a shared name.

<input id="radio-4" class="radio-style" name="radio-group-1" type="radio" checked>
<label for="radio-4" class="radio-style-1-label">First Choice</label>

<input id="radio-5" class="radio-style" name="radio-group-1" type="radio">
<label for="radio-5" class="radio-style-1-label">Second Choice</label>

<!-- Alternate styles -->
<input id="radio-7" class="radio-style" name="radio-group-2" type="radio" checked>
<label for="radio-7" class="radio-style-2-label">First Choice</label>

Options

.bt-switch data attributes

  • data-size="mini": shrink the switch.
  • data-on-color / data-off-color: color for the on and off states. Values include primary, info, success, warning, danger, default, themecolor, black, white.
  • data-on-text / data-off-text: custom on and off labels.
  • data-indeterminate="true": start in an indeterminate state.
  • data-inverse="true": swap which side is treated as on.
  • checked, disabled, readonly: standard input attributes for initial state.

.switch-toggle modifier classes

  • Shape: .switch-toggle-round (pill) or .switch-toggle-flat (square).
  • Size: .switch-rounded-mini, .switch-rounded-large, .switch-rounded-xlarge, .switch-flat-mini, .switch-flat-large, .switch-flat-xlarge.

.radio-style label classes

  • .radio-style-1-label, .radio-style-2-label, .radio-style-3-label: three visual styles.
  • .radio-small: a smaller variant, added alongside a label class.

Tips

  • Every .radio-style input needs a matching <label for="...">; the label is what renders the visible control.
  • Group related radios by giving them the same name so only one can be selected at a time.
  • Reach for .switch-toggle when you want a toggle with zero JavaScript, and .bt-switch when you need colors, sizes, or on/off text.
Was this page helpful?