Switch
Switches are used to provide users with multiple options for selection in a series of options.
When used as a toggle they allow the user to make a binary choice usually (but not limited) in the form of a yes/no or on/off suggestion. Toggles are often used in product settings or as filter options. When engaged (on), Base Web toggles are colored and when disengaged (off) they’re grey.
When to use
- When a collection of options share context.
- When a user wants to toggle an option on/off.
- When a user wants to select multiple options.
Examples
As with many of our components, there is also an uncontrolled version, StatefulSwitch, which manages its own state.
API
Switch props
| Name | Type | Default | Description |
|---|---|---|---|
autoFocus | boolean | false | If true the component will be focused on the first mount. |
checked | boolean | false | Renders component in checked state. |
children | react node | The React Nodes displayed next to the switch. | |
disabled | boolean | false | Renders component in disabled state. |
inputRef | ref | A ref to access an input element. | |
intent | 'default'| 'success'| 'warning'| 'error'| 'ai' | Defines the intent of the Switch. | |
labelPlacement | 'top'| 'bottom'| 'left'| 'right' | right | Determines how to position the label relative to the checkbox. |
name | string | Name attribute. | |
onBlur | function | Called the onBlur event triggers. | |
onChange | function | Called when switch value is changed. | |
onFocus | function | Called the onFocus event triggers. | |
onMouseDown | function | Called when mouseDown triggers. | |
onMouseEnter | function | Called when mouseEnter triggers. | |
onMouseLeave | function | Called when mouseLeave triggers. | |
overrides | custom | Lets you customize all aspects of the component. | |
required | boolean | false | Renders component in required state. |
size | 'sm'| 'md'| 'lg' | md | The size of the component |
title | string | Title attribute. |
You can check the implementation of the component for more details.
Switch exports
You can import this module like so:
import {StatefulContainer} from 'spaceweb/switch'
It exports the following components or utility functions:
- StatefulContainer
- StatefulSwitch
- StyledInput
- StyledLabel
- StyledRoot
- StyledToggle
- StyledToggleTrack
- Switch