Toggle Button Vertical

This text is AI-generated — we need your feedback

This documentation was written with the help of AI and has not been fully reviewed. If something is wrong, unclear or missing, please tell us: open the feedback form, say which section it concerns and what you expected to read. The same link is at the bottom of every page.

The Toggle Button Vertical is a column of connected buttons of which one is selected: a compact alternative to radio buttons for choosing between a few modes or views, where there is more room in height than in width, such as a side panel. It is found in the Input - OpenBridge section of the Perspective Component Palette as Toggle Button Vertical.

Each button is an option. The selected option is highlighted, and a click on another option selects that one instead.

The Toggle Button Vertical is one of the input components. How values are written back, events, disabling and the behavior in the Designer are shared by all of them and are described in Input Components — Common Features. This page covers what is specific to the Toggle Button Vertical. For options side by side in a row, use the Toggle Button Horizontal.

A Toggle Button Vertical dropped from the palette has a single option, Option 1. The blue frame is the component’s box; the options are placed at its top and fill its width:

Each option is 48 px high, so make the component 48 px high per option.

Options

options is the list of buttons, from top to bottom. Use it for two to about five options with short labels.

Each option is an object:

Name	Description	Property Type
label	Text of the option.	value
value	What is written to value when the option is selected. A text, a number or a boolean; must be unique.	value
icon	Icon of the option, chosen with the icon picker. Shown when hasIcon is true. See Icons.	object
disabled	The operator cannot select this option. Default false. See Disabled.	value

Properties

Name	Description	Property Type
options	The options. One option, Option 1, by default.	array

---

Selection

value holds the value of the selected option. When the operator clicks an option that is not selected, the component writes that option’s value to value and then fires onActionPerformed. A click on the option that is already selected does nothing.

Bind value bidirectionally to a tag to connect the toggle button to it. See Values. A number or a boolean is written as such: with the option values 1 and 2, the number 2 is written, not the text.

If value does not match any option that can be selected — it is empty, for instance, as on a new component — the first enabled option is shown as selected. Nothing is written: value keeps what it had until the operator clicks.

Set allowEmptySelection to true to show no selection in that case:

Use it when “not set” is a valid state, for instance while the tag has no value. The operator cannot clear the selection: a click always selects an option.

Properties

Name	Description	Property Type
value	The value of the selected option. Written when the operator selects an option. Empty by default.	value
allowEmptySelection	Show no selection when value matches no option, instead of the first option. Default false.	value

---

Icons

Set hasIcon to true to show the icon of each option. It applies to all options, so give every option an icon.

hasIcon
false (default)
true

The icon of an option is an icon picker: it has a path, for example openbridge/palette-day. See Icons.

labelPlace sets where the label is drawn relative to the icon:

labelPlace
inline (default)
under

With under each option is 66 px high instead of 48.

Properties

Name	Description	Property Type
hasIcon	Show the icon of each option. Default false.	value
labelPlace	Place of the label relative to the icon: inline or under. Default inline.	value

---

Type

type sets the style of the buttons:

type
regular (default)	A common background, the selected option filled.
flat	No background; the selected option is lightly tinted.
normal	A common background, the selected option drawn raised.

Properties

Name	Description	Property Type
type	regular, flat or normal. Default regular.	value

---

Disabled

Set disabled to true to disable the whole toggle button, or disabled on an option to disable only that one. A disabled option is dimmed and cannot be selected; value is not written and the event does not fire.

The component	One option (Dusk)

If value is the value of a disabled option, that option is not shown as selected: the first enabled option is. With allowEmptySelection the disabled option stays shown as selected.

See Disabled.

---

Properties

Properties not covered in the sections above:

Name	Description	Property Type
hugWidth	Meant to make the buttons as wide as their content. It currently has no effect: the buttons always fill the width of the component.	value

Common Properties

These work in the same way on every input component, and are described in Input Components — Common Features:

• Disabled — disabled.
• Appearance — style. The colours follow the palette of the session:

Component Events

Event	Description	Event Object
onActionPerformed	Fired when the operator selects another option, after value is written.	—

The event object is empty; read the selection from self.props.value. See Events.

Examples

Example 1 — Mode Selector Bound to a Tag

1. Drop a Toggle Button Vertical into the view and make it 160 px wide and 144 px high (three options of 48 px).

2. Set options:

   [
     {"label": "Off", "value": 0},
     {"label": "Manual", "value": 1},
     {"label": "Auto", "value": 2}
   ]

3. Bind value to the tag [default]Pump01/Mode and enable Bidirectional.

4. Set allowEmptySelection to true, so that no mode is highlighted if the tag holds a value outside 0–2.

The toggle button now shows the mode of the pump, and a click writes 0, 1 or 2 to the tag.

Example 2 — Palette Selector with Icons

1. Set hasIcon to true.

2. Set options:

   [
     {
       "label": "Day",
       "value": "day",
       "icon": {"path": "openbridge/palette-day"}
     },
     {
       "label": "Dusk",
       "value": "dusk",
       "icon": {"path": "openbridge/palette-dusk"}
     },
     {
       "label": "Night",
       "value": "night",
       "icon": {"path": "openbridge/palette-night"}
     }
   ]

3. Bind value bidirectionally to the session property that holds the palette.