Switch

Introduction

A switch is simply an alternate appearance for a checkbox that simulates on/off instead of checked/unchecked.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

Public
Edit code

Usage

Switch

1import React from "react";
2import { Switch } from "@commure/components-foundation";
3
4function MySwitch() {
5  return (
6    <Switch labelElement={<strong>Enabled</strong>} defaultChecked={true} />
7  );
8}
9
10export default MySwitch;

API Reference

Switch

Prop Name	Required?	Type	Description
alignIndicator	false	Alignment	Alignment of the indicator within container.
checked	false	boolean	Whether the control is checked.
children	false	React.ReactNode	JSX label for the control.
className	false	string	A space-delimited list of class names to pass along to a child element.
defaultChecked	false	boolean	Whether the control is initially checked (uncontrolled mode).
disabled	false	boolean	Whether the control is non-interactive.
inline	false	boolean	Whether the control should appear as an inline element.
innerLabel	false	string	Text to display inside the switch indicator when unchecked.
innerLabelChecked	false	string	Text to display inside the switch indicator when checked. If `innerLabel` is provided and this prop is omitted, then `innerLabel` will be used for both states.
inputRef	false	(ref: HTMLInputElement | null) => any	Ref handler that receives HTML `<input>` element backing this component.
label	false	string	Text label for the control. Use `children` or `labelElement` to supply JSX content. This prop actually supports JSX elements, but TypeScript will throw an error because `HTMLAttributes` only allows strings.
labelElement	false	React.ReactNode	JSX Element label for the control. This prop is a workaround for TypeScript consumers as the type definition for `label` only accepts strings. JavaScript consumers can provide a JSX element directly to `label`.
large	false	boolean	Whether this control should use large styles.
onChange	false	React.FormEventHandler<HTMLInputElement>	Event handler invoked when input value is changed.
tagName	false	keyof IntrinsicElements	Name of the HTML tag that wraps the checkbox. By default a `<label>` is used, which effectively enlarges the click target to include all of its children. Supply a different tag name if this behavior is undesirable or you're listening to click events from a parent element (as the label can register duplicate clicks).

Related Reading

Blueprint Reference