Canvas Kit Switch
A pill shaped switch. This is an
controlled input
component.
Undocumented props are spread to the input
element.
> Workday Design Reference
Installation
yarn add @workday/canvas-kit-react
or
yarn add @workday/canvas-kit-react-switch
Usage
Simple Example
Note: While a base switch component is provided in this package, it is not accessible when
used as is. It should be used in tandem with FormField
to be made fully
accessible (see below).
import * as React from 'react';
import {Switch} from '@workday/canvas-kit-react-switch';
<Switch disabled={false} checked={checked} onChange={this.handleCheck} />;
Accessible Example
import * as React from 'react';
import {Switch} from '@workday/canvas-kit-react-switch';
import FormField from '@workday/canvas-kit-react-form-field';
<FormField label="My Field" inputId="my-switch-field">
<Switch disabled={false} checked={checked} onChange={this.handleCheck} id="my-switch-field" />;
</FormField>;
If use inside a FormField doesn't work for your use case, you can use the aria-labelledby
attribute.
import * as React from 'react';
import {Switch} from '@workday/canvas-kit-react-switch';
<label id="123">Label</label>
...
<Switch disabled={false} checked={checked} onChange={this.handleCheck} aria-labelledby="123" />;
Static Properties
None
Component Props
Required
None
Optional
checked: boolean
Whether or not the switch is on (true
) or off (false
)
Default: false
disabled: boolean
Whether or not the switch is disabled (not able to be switched on or off)
Default: false
id: string
The HTML attribute id
for the underlying input checkbox component.
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
A callback that gets called everytime the switch checked state changes.
value: string
The value
attribute of the input checkbox.
inputRef: React.Ref<HTMLInputElement>
A ref to the underlying input checkbox element. Use this to imperatively switch or focus this
component.
error: ErrorType
The type of error to display, if any.
Type | Description |
---|
Error | Red outline with error icon. |
Alert | Yellow outline with alert icon. |
Default: undefined