Skip to content

Properties

PropertiesDescription
checked(optional) determine whether the switch is checked or not. The default will be false.
title(required) the title of the input - describing it a bit further for accessibility reasons.
label(optional) use either the label property or provide a custom one.
label_position(optional) defines the position of the label. Use either left or right. Defaults to right.
label_sr_only(optional) use true to make the label only readable by screen readers.
size(optional) the size of the switch. For now there is medium (default) and large.
status(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.
status_state(optional) defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error.
status_props(optional) use an object to define additional FormStatus properties.
globalStatus(optional) the configuration used for the target GlobalStatus.
suffix(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.
skeleton(optional) if set to true, an overlaying skeleton with animation will be shown.
innerRef(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().
Space(optional) spacing properties like top or bottom are supported.