Tonic UI
Getting StartedColor ModeColor StyleVersionsContributing
THEME
BordersBreakpointsColorsOutlinesPositionsSpacingSizesShadowsTypography
BUILDING BLOCKS
BoxControlBox
UTILITIES

Switch

The Switch component is used as an alternative to the Checkbox component. You can use it to render a single option that can be turned on or off.

Import

Usage

EDITABLE EXAMPLE

Sizes

Pass the size prop to change the size of the Switch.

EDITABLE EXAMPLE

Switch background color

  • Use the variantColor prop to change the checked background color of the Switch. variantColor can be any color key with key 50(hover), 60(checked, focus) that exist in the theme.colors.

    That means the red:60 exists in the theme.colors then can use variantColor="red".

  • Learn more about colors theming.

EDITABLE EXAMPLE

Props

NameTypeDefaultDescription
sizestring'md'The size of the switch. One of: 'sm', 'md', 'lg'
variantColorstring'blue'The background color of the switch when checked.
namestringThe input name of the switch when used in a form.
valuestring | booleanThe value of the switch.
childrenReactNodeThe children of the switch.
aria-labelstringThe aria-label of the switch for accessibility.
aria-labelledbystringThe aria-labelledby of the switch for accessibility.
checkedbooleanIf true, set the switch to the checked state.
defaultCheckedbooleanIf true, the checkbox will be initially checked.
disabledbooleanIf true, set the disabled to the invalid state.