ComponentsSwitch
Version 0.10.0

Switch

A control that indicates whether a setting is on or off.

Usage#

import { Switch } from '@backstage/ui';

<Switch />

API reference#

PropTypeDefaultResponsive
autoFocus
boolean
-No
defaultSelected
boolean
-No
className
string
-No
isDisabled
boolean
-No
isReadOnly
boolean
-No
isSelected
boolean
-No
label
string
-No
name
string
-No
onChange
(isSelected: boolean) => void
-No
onFocus
(e: FocusEvent<Target>) => void
-No
onBlur
(e: FocusEvent<Target>) => void
-No
onFocusChange
(isFocused: boolean) => void
-No
onKeyDown
(e: KeyboardEvent) => void
-No
onKeyUp
(e: KeyboardEvent) => void
-No
onHoverStart
(e: HoverEvent) => void
-No
onHoverEnd
(e: HoverEvent) => void
-No
onHoverChange
(isHovered: boolean) => void
-No
style
CSSProperties
-No
value
string
-No

Examples#

Disabled#

A switch can be disabled using the isDisabled prop.

<Switch isDisabled />

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

  • bui-Switch
  • bui-SwitchIndicator

Changelog#

  • 0.9.0 - BREAKING: Changed className prop behavior to augment default styles instead of being ignored or overriding them.

Affected components:

  • Menu, MenuListBox, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBoxItem, MenuSection, MenuSeparator
  • Switch
  • Skeleton
  • FieldLabel
  • Header, HeaderToolbar
  • HeaderPage
  • Tabs, TabList, Tab, TabPanel

If you were passing custom className values to any of these components that relied on the previous behavior, you may need to adjust your styles to account for the default classes now being applied alongside your custom classes. #31496

  • 0.5.0 - New Switch component #30251