Skip to content

ToggleButton (button) properties

PropertiesDescription
value(required) defines the value as a string. Use it to get the value during the on_change event listener callback in the ToggleButtonGroup.
text(required) the text shown in the ToggleButton.
checked(optional) determine whether the ToggleButton is checked or not. The default will be false.
title(optional) 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.
icon(optional) icon to be included in the toggle button.
icon_position(optional) position of the icon inside the toggle button. Set to left or right. Defaults to right if not set.
icon_size(optional) define icon width and height. Defaults to 16px
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.
global_status_id(optional) the status_id used for the target GlobalStatus.
suffix(optional) text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component.
skeleton(optional) if set to true, an overlaying skeleton with animation will be shown.
Space(optional) spacing properties like top or bottom are supported.

ToggleButton (group) properties

PropertiesDescription
value(optional) defines the pre-selected ToggleButton button. The value has to match the one provided in the ToggleButton button. Use a string value.
values(optional) defines the pre-selected ToggleButton buttons in multiselect mode. The values have to match the one provided in the ToggleButton buttons. Use array, either as JS or JSON string.
multiselect(optional) defines if the ToggleButton's should act as a multi-selectable list of toggle buttons. Defaults to false.
layout_direction(optional) Define the layout direction of the ToggleButton buttons. Can be either column or row. Defaults to column.
title(optional) the title of group, describing it a bit further for accessibility reasons.
status(optional) uses the form-status component to show failure messages.
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.
global_status_id(optional) the status_id used for the target GlobalStatus.
label(optional) use either the label property or provide a custom one.
label_direction(optional) to define the label layout direction on how the next element should be placed on. Can be either vertical or horizontal. Defaults to horizontal.
label_sr_only(optional) use true to make the label only readable by screen readers.
vertical(optional) will force both direction and label_direction to be vertical if set to true.
suffix(optional) text describing the content of the ToggleButtonGroup more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButtonGroup component.
skeleton(optional) if set to true, an overlaying skeleton with animation will be shown.
Space(optional) spacing properties like top or bottom are supported.