Bain Logo

Toggle

Jump to Props

Quickly toggle between two states.

A toggle is very similar to a Checkbox Although not provided within the component, a Toggle should always be accompanied by a text label that describes the setting.

Import

Use

Here's an example implementation. Currently this is an uncontrolled component, meaning you need to handle the state from the outside. You can pass in a callback function via the onChange handler.

Send Me Notifications

Color

Most of the time you should keep the default color, but it is possible to adjust the 'on' state by setting the tintColor prop.

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
checkedboolean

The state of the component

disabledboolean

The disabled state of the component

tintColorstringprimary

The color of the component when checked.

onChangefunction

Function called when the user changes the `checked` state.

idstring

Unique ID of the component. Required.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy