Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

switch

v4.5.2arrow_drop_down
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
292
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
3 months ago
SIZE
29 KB
2 contributors
Install switch as a package?
Copied
npm i @bit/mui-org.material-ui.switch
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDescription
checked
bool

If true, the component is checked.

checkedIcon
node

The icon to display when the component is checked.

classes
(required)
object

Override or extend the styles applied to the component. See CSS API below for more details.

className
string
color
'primary' | 'secondary' | 'default'

The color of the component. It supports those theme colors that make sense for this component.

defaultChecked
bool
disabled
bool

If true, the switch will be disabled.

disableRipple
bool

If true, the ripple effect will be disabled.

edge
'start' | 'end' | false

If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).

icon
node

The icon to display when the component is unchecked.

id
string

The id of the input element.

inputProps
object

Attributes applied to the input element.

inputRef
custom

Pass a ref to the input element.

onChange
function

The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean).

required
bool

If true, the input element will be required.

size
'small' | 'medium'

The size of the switch. small is equivalent to the dense switch styling.

type
string

The input component prop type.

value
any

The value of the component. The DOM API casts this to a string.