ToggleButton properties
| Property | Type | Description |
|---|---|---|
value | string | (required) Defines the value as a string. Use it to get the value during the on_change event listener callback in the ToggleButtonGroup. |
text | string | (required) The text shown in the ToggleButton. |
checked | boolean | (optional) Determine whether the ToggleButton is checked or not. The default will be false. |
title | string | (optional) The title of the input - describing it a bit further for accessibility reasons. |
label | string | (optional) Use either the label property or provide a custom one. |
icon | string React.ReactNode | (optional) Icon to be included in the toggle button. |
icon_position | left right | (optional) Position of the icon inside the toggle button. Set to left or right. Defaults to right if not set. |
icon_size | string | (optional) Define icon width and height. Defaults to 16px. |
size | small medium default large | (optional) The size of the button. For now there is small, medium, default and large. |
status | error info boolean | (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 | error info | (optional) Defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error. |
status_props | object | (optional) Use an object to define additional FormStatus properties. |
globalStatus | object | (optional) The configuration used for the target GlobalStatus. |
suffix | string React.ReactNode | (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 | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
ToggleButton.Group properties
| Property | Type | Description |
|---|---|---|
value | string | (optional) Defines the pre-selected ToggleButton button. The value has to match the one provided in the ToggleButton button. Use a string value. |
values | array | (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 | boolean | (optional) Defines if the ToggleButton's should act as a multi-selectable list of toggle buttons. Defaults to false. |
layout_direction | column row | (optional) Define the layout direction of the ToggleButton buttons. Can be either column or row. Defaults to column. |
title | string | (optional) The title of group, describing it a bit further for accessibility reasons. |
status | string | (optional) Uses the form-status component to show failure messages. |
status_state | error info | (optional) Defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error. |
status_props | object | (optional) Use an object to define additional FormStatus properties. |
globalStatus | object | (optional) The configuration used for the target GlobalStatus. |
label | string | (optional) Use either the label property or provide a custom one. |
label_direction | vertical horizontal | (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 | boolean | (optional) Use true to make the label only readable by screen readers. |
vertical | boolean | (optional) Will force both direction and label_direction to be vertical if set to true. |
suffix | string | (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 | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |