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
Usage
Switch
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