Skip to content

Properties

PropertyTypeDescription
checkedboolean(optional) Determine whether the switch is checked or not. The default will be false.
titlestring(required) The title of the input - describing it a bit further for accessibility reasons.
labelReactNode(optional) Use either the label property or provide a custom one.
labelPositionleft
right
(optional) Defines the position of the label. Use either left or right. Defaults to right.
labelSrOnlystring(optional) Use true to make the label only readable by screen readers.
sizedefault
medium
large
(optional) The size of the switch. For now there is medium (default) and large.
statusReactNode(optional) Text with a status message. The style defaults to an error message. You can use true to only get the status color, without a message.
statusStateerror
warn
info
success
marketing
(optional) Defines the state of the status. Defaults to error.
statusPropsFormStatus(optional) Use an object to define additional FormStatus properties.
globalStatusGlobalStatus(optional) The configuration used for the target GlobalStatus.
suffixReactNode(optional) Text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component.
skeletonboolean(optional) If set to true, an overlaying skeleton with animation will be shown.
innerRefstring(optional) By providing a React.ref we can get the internally used input element (DOM). E.g. innerRef={myRef} by using React.createRef() or React.useRef().
Spacestring
object
(optional) Spacing properties like top or bottom are supported.