Switch

Introduction

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

Examples

Usage

Switch

import React from "react";
import { Switch } from "@commure/components-foundation";
function MySwitch() {
return (
<Switch labelElement={<strong>Enabled</strong>} defaultChecked={true} />
);
}
export default MySwitch;

API Reference

Switch

Prop NameRequired?TypeDescription
alignIndicatorfalseAlignmentAlignment of the indicator within container.
checkedfalsebooleanWhether the control is checked.
childrenfalseReact.ReactNodeJSX label for the control.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
defaultCheckedfalsebooleanWhether the control is initially checked (uncontrolled mode).
disabledfalsebooleanWhether the control is non-interactive.
inlinefalsebooleanWhether the control should appear as an inline element.
innerLabelfalsestringText to display inside the switch indicator when unchecked.
innerLabelCheckedfalsestringText 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.
inputReffalse(ref: HTMLInputElement | null) => anyRef handler that receives HTML `<input>` element backing this component.
labelfalsestringText 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.
labelElementfalseReact.ReactNodeJSX 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`.
largefalsebooleanWhether this control should use large styles.
onChangefalseReact.FormEventHandler<HTMLInputElement>Event handler invoked when input value is changed.
tagNamefalsekeyof IntrinsicElementsName 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