Switch Node
Switches are visual toggles that can be switched on or off.
Switches are often useful for boolean configuration options. They are very similar to checkboxes.
Properties
Visible
Prop | switchNode.isVisible |
---|---|
Type | boolean |
Default | {{true}} |
Whether or not this node is visible.
Enabled
Prop | switchNode.isEnabled |
---|---|
Type | boolean |
Default | {{true}} |
Whether or not this node is enabled.
Tooltip
Prop | switchNode.tooltip |
---|---|
Type | string |
Default | undefined |
The tooltip text to display when hovered or focused over this node.
Top
Prop | switchNode.top |
---|---|
Type | string |
Default | 1 |
The position of the node from the top side of the grid (grid-row-start
).
Left
Prop | switchNode.left |
---|---|
Type | string |
Default | 1 |
The position of the node from the left side of the grid (grid-column-start
).
Width
Prop | switchNode.width |
---|---|
Type | string |
Default | 128px |
The width of the node. When this node is in a grid layout, this should be done using unitless grid column units (specifying 4
will become grid-column-end: span 4
). When this node is in a stack layout, the width must be specified using CSS units (e.g. 100px
or 100%
).
Min Width
Prop | switchNode.minWidth |
---|---|
Type | string |
Default | none |
The minimum width of the node. When this node is in a grid layout, this property is ignored.
Max Width
Prop | switchNode.maxWidth |
---|---|
Type | string |
Default | none |
The maximum width of the node. When this node is in a grid layout, this property is ignored.
Height
Prop | switchNode.height |
---|---|
Type | string |
Default | 32px |
The height of the node. When this node is in a grid layout, this should be done using unitless grid row units (specifying 4
will become grid-row-end: span 4
). When this node is in a stack layout, the height must be specified using CSS units (e.g. 100px
or 100%
).
Min Height
Prop | switchNode.minHeight |
---|---|
Type | string |
Default | none |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Max Height
Prop | switchNode.maxHeight |
---|---|
Type | string |
Default | none |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Overflow
Prop | switchNode.overflow |
---|---|
Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
Default | auto |
The strategy used to handle overflow in the horizontal and vertical axes for content that is larger than its container.
Overflow X
Prop | switchNode.overflowX |
---|---|
Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
Default | auto |
The strategy used to handle overflow in the horizontal axis for content that is larger than its container.
Overflow Y
Prop | switchNode.overflowY |
---|---|
Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
Default | auto |
The strategy used to handle overflow in the vertical axis for content that is larger than its container.
Custom Styles
Prop | switchNode.styles |
---|---|
Type | string |
Default | element.styles { } |
Custom CSS styles to be applied to the node. Use element.styles
to refer to the current node.
Label
Prop | switchNode.label |
---|---|
Type | string |
Default | On or off? |
The label displayed next to the switch.
Field Name
Prop | switchNode.formFieldName |
---|---|
Type | string |
Default | undefined |
Defines the key for this input in the body of the submitted form.
Label Style
Prop | switchNode.labelStyle |
---|---|
Type | SwitchLabelStyle ('left' | 'top' | 'hidden' | 'right') |
Default | right |
The display style of the label next to the switch.
Size
Prop | switchNode.size |
---|---|
Type | CheckboxSize ('sm' | 'md' | 'lg') |
Default | md |
The size of the switch. Size is a measurement value like "md" and can be configured in the theme.
Value
Prop | switchNode.value |
---|---|
Type | boolean |
Default | {{false}} |
The current value of the checkbox. If switched on, this will be true
. If switched off, this will be false
.
Required
Prop | switchNode.isRequired |
---|---|
Type | boolean |
Default | {{false}} |
Whether or not this switch must be on. This is a visual flag that updates the corresponding accessibility properties. It is up to the app developer to enforce the requirement.
Event Handlers
On Checked
Handler | switchNode.onChecked |
---|
Called when the switch is switched on.
On Unchecked
Handler | switchNode.onUnchecked |
---|
Called when the switch is switched off.