A toggle control for on/off settings with label support.
import { Switch } from '@backstage/ui';
<Switch />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Text label displayed next to the switch. |
| isSelected | boolean | - | Controlled selected state. Use with onChange for controlled behavior. |
| defaultSelected | boolean | - | Initial selected state for uncontrolled usage. |
| onChange | (isSelected: boolean) => void | - | Called when the switch state changes. |
| isDisabled | boolean | - | Prevents user interaction when true. |
| isReadOnly | boolean | - | Makes the switch non-interactive but still focusable. |
| name | string | - | Form field name for form submission. |
| value | string | - | Form field value submitted when selected. |
| autoFocus | boolean | - | Focuses the switch on mount. |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
Inherits all React Aria Switch props.
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-Switchbui-SwitchIndicatorBreaking Changed className prop behavior to augment default styles instead of being ignored or overriding them.
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