SwitchProps
Properties
A ref for imperative actions. It currently only supports focusVisible() action.
If true, the ripples are centered. They won't start at the cursor interaction position.
The icon to display when the component is checked.
Override or extend the styles applied to the component.
The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
The default checked state. Use when the component is not controlled.
If true, the keyboard focus ripple is disabled.
If true, the ripple effect is disabled.
If true, the touch ripple effect is disabled.
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).
If true, the base button will have a keyboard focus ripple.
This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed.
Attributes applied to the input element.
The component used to render a link when the href prop is provided.
Callback fired when the state is changed.
Callback fired when the component is focused with a keyboard. We trigger a onFocus callback too.
Props applied to the TouchRipple element.
A ref that points to the TouchRipple element.