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

Prop	`isVisible`
Type	`boolean`
Default	`{{true}}`

Prop	`isEnabled`
Type	`boolean`
Default	`{{true}}`

Tooltip

Prop	`tooltip`
Type	`string`
Default	`undefined`

The tooltip text to display when hovered or focused over this node.

Top

Prop	`top`
Type	`number`
Default	`1`

The position of the node from the top side of the grid (grid-row-start).

Left

Prop	`left`
Type	`number`
Default	`1`

The position of the node from the left side of the grid (grid-column-start).

Width

Prop	`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	`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	`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	`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	`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	`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	`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	`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	`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	`styles`
Type	`string`
Default	`element.styles { }`

Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.

Object Fit

Prop	`objectFit`
Type	`ObjectFit ('none' \| 'contain' \| 'cover' \| 'fill' \| 'scale-down')`
Default	`cover`

The strategy used to set how the content of a replaced element should be resized to fit its container.

Field Name

Prop	`formFieldName`
Type	`string`
Default	`undefined`

Defines the key for this input in the body of the submitted form.

Label

Prop	`label`
Type	`string`
Default	`On or off?`

The label displayed next to the switch.

Label Style

Prop	`labelStyle`
Type	`SwitchLabelStyle ('left' \| 'top' \| 'hidden' \| 'right')`
Default	`right`

The display style of the label next to the switch.

Size

Prop	`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	`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	`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 Hover

Handler	`switchNode.onHover`

Called when the user hovers on the node. Use this event to trigger downstream actions when this node is hovered.

On Leave

Handler	`switchNode.onLeave`

Called when the user is not hovering over the node. Use this event to trigger downstream actions when this node is no longer hovered.

On Focus

Handler	`switchNode.onFocus`

Called when the user focuses the node. Use this event to trigger downstream actions when this node is focused.

On Blur

Handler	`switchNode.onBlur`

Called when the user blurs the node. Use this event to trigger downstream actions when this node is blurred.

On Checked

Handler	`switchNode.onChecked`

Called when the switch is switched on.

On Unchecked

Handler	`switchNode.onUnchecked`

Called when the switch is switched off.