Switch

July 15, 2018 ยท View on GitHub

Form control to toggle the state of a single option. Generates a styled checkbox input element.

Main features

  • All Checkbox main features
  • Custom icon
  • Custom z-depths
  • Disable shadow
  • RTL (right-to-left) support

Usage

Identical to Checkbox. See Checkbox usage instructions and replace "Checkbox" with "Switch".

Options

See: Checkbox

Switch specific options

ParameterRequiredTypeDefaultDescription
raisedoptionalBooleantrueShows a shadow below the thumb; when the Switch state is on, the depth is incremented by 1
washoptionalBooleantrue on touch devicesSet to false to always hide the wash (radial feedback); note that a (hidden) wash is still drawn to create a large tap target
shadowDepthOffoptionalNumber 0-51The shadow depth for the thumb in off state
shadowDepthOnoptionalNumber 0-52The shadow depth for the thumb in on state

CSS classes