Skip to main content

Radio Button

This node places a radio button in the visual tree. The Radio Button must be placed in a Radio Button Group node to function properly.

You must specify a unique Value for each Radio Button node. Only one Radio Button in a Radio Button Group can be selected at once.

The core radio button has a very simple visual appearance and is most often used in other components as part of a design system. This control contains all logic such as accessibility etc. It can be styled in via it's properties, or you can use it only for the logic and create your own radio button component in your own design system.

Inputs

The main input of the Radio Button node is the Value input:

DataDescription
ValueThe value for this radio button. The value of the selected radio button in a radio button group will be passed as the Value output of the radio button group. All radio buttons in a group should have unique values.
Background ColorThe background color when the radio button is "checked".

It can be enabled and disabled using the Enabled input:

DataDescription
EnabledSpecifies if the control is Enabled (true) or Disabled (false). A disabled control will not respond to any user interaction.

The Checkbox node has a set of label properties that can be set:

DataDescription
Enable LabelSets whether the label is visible or not.
Text StyleSet an existing text style to this node, or create a new text style from the current properties.
LabelA text string that will be shown as the label on the button.
SpacingThe spacing between the label and the checkbox.

Similarly, it has a set of icon properties:

DataDescription
Enable IconSets whether the icon is visible or not.
TypeUse this to set if you want to use a predefined icon or a custom image from the project folder.
SourceWhere to get the icon.
PlacementSets whether the icon should be to the left or to the right of the Label
SizeThe width of the icon in px.
ColorSets the color of the icon. Only visible if Type is set to icon.

Visual

This node supports the following Visual Input Properties:

Outputs

The main output of the Radio Button node is the Checked output.

DataDescription
CheckedA boolean output that is true when this radio button control is checked and false if not. This is useful when using this control as a base for your own component that will represent visually that it is checked.

It also features a set of signals:

SignalDescription
ChangedA signal is sent on this output when the value of the control is changed by user interaction.
FocusedA signal is sent on this output when the control is focused.
BlurredA signal is sent on this output when the control is blurred, i.e. it has lost the input focus.
Pointer DownEmitted when the mouse is pressed or finger is down on the node.
Pointer UpEmitted when the mouse is released or finger is lifted on the node.
Hover StartEmitted when the mouse enters the node.
Hover EndEmitted when the mouse leaves the node.

States

Apart from triggering signals the Checkbox node also notifies of its state through data outputs:

DataDescription
EnabledA boolean output that is true if the control is in Enabled state and false if it is Disabled. This is useful when using this control as a base for your own component that will represent visually that it is enabled or disabled.
FocusedThis is a boolean type output that will be true if the control is in Focused state, and false otherwise. This is useful when using this control as a base for your own component that will represent visually that it is focused. This can be due to the user selecting the control for input or by using the keyboard.
HoverA boolean type output that is true when the user hovers over this control with the mouse and false otherwise. This is useful when using this control as a base for your own component that will represent visually that it is hovered.
PressedA boolean output that is true when the user is currently pressing the control. This is useful when using this control as a base for your own component that will represent visually that it is pressed.

This node supports the following Visual Output Properties:

Visual Input Properties

All visual nodes feature a plethora of visual properties that can be accessed both in the Property Panel and through inputs. These are documented below. Plese refer to the individual node documentation pages to see which nodes feature what visual properties.

Margin

Margins are the spacings around the node, outside of the borders. The margins for the node can be set individually in the Spacing Gadget.

DataDescription
Margin LeftThe left margin in px, or % of the parents width.
Margin RightThe right margin in px, or % of the parents width.
Margin TopThe top margin in px or, % of the parents width.
Margin BottomThe bottom margin in px, or % of the parents width.

Padding

Paddings are the spacings around the nodes content, inside of the borders. The margins for the node can be set individually in the Spacing Gadget.

DataDescription
Padding LeftThe left padding in px, or % of the parents width.
Padding RightThe right padding in px, or % of the parents width.
Padding TopThe top padding in px or, % of the parents width.
Padding BottomThe bottom padding in px, or % of the parents width.

Alignment

To specify how the node is aligned to its parent you can use the Alignment Gadget.

From left to right, the alignment options are:

DataDescription
Align BottomAlign this node to the bottom of its parent.
Align Vertical CenterAlign this node to the bottom of its parent.
Align TopAlign this node to the top of its parent.
Align LeftAlign this node to the left side of its parent.
Align Horizontal CenterAlign this node to the horizontal center of its parent.
Align RightAlign this node to the right of its parent.

Connection Values

When making a connection to the layout property, the values are a little different than the ones in the dropdown. Here is a list of the values, that should be passed in:

Display NameValue
Align Bottombottom
Align Vertical Centercenter
Align Toptop
Align Leftleft
Align Horizontal Centercenter
Align Rightright

Dimensions

Controling the width and height of the node is done with the Dimension Gadget.

The first four controls the Size Mode of the node. It decides how the width and height of the node is specified. From left to right, the options are:

DataDescription
Explicit width and heightSet the width and height directly in pixels or percentage. Percentage is in relation to the parent, so 100% is the same size as the parent.
Explicit height, Content WidthThe node will calculate the width to fit all of its children. The height is explicitly set.
Explicit width, Content HeightThe node will calculate the height to fit all of its children. The width is explicitly set.
Content SizeBoth the width and the height is calculated to fit all of the node's children.

The other properties are:

DataDescription
WidthSpecify the width of this node in pixels, percentage of parent's width or the unit vw which is percentage of the browser window width.
HeightSpecify the height of this node in pixels, percentage of parent's height or the unit vw which is percentage of the browser window height.
FixedControls if an element will try to resize and share space with siblings without going outside of the bounds of the parent.

If Fixed is enabled, the element will be the exact specified size. If it is disabled, the element will resize to fill up empty space, or shrink to make space for siblings.

You can use the Dimension Contstraints Gadget to set a min and/or a max size for the node.

Layout

The supported properties of the Layout Gadget can be very different depending on the node. All possible properties are listed below.

• Position

Controls the layout of this node is in its parent group.

OptionDescription
In LayoutThis node is part of the parent group layout, it will be stacked with its siblings depending on the parent group layout settings.
AbsoluteThis node will not be part of the parent group layout, instead you are free to use the Pos X and Pos Y to place this node explicitly.
StickyBehaves like In Layout, except when the node is about the be scrolled outside the parent. It'll stick to an edge of the parent instead of scrolling away. The edge it sticks to can be controlled with the Alignment input.

• Layout Direction

By default all children are stacked. This property specifies the stacking direction.

DataDescription
VerticalChildren are stacked vertically.
HorizontalChildren are stacked horizontally.
NoneChildren are not stacked.

When making a connection to the layout property, the values are a little different than the ones in the dropdown. Here is a list of the values, that should be passed in:

Display NameValue
Verticalcolumn
Horizontalrow
Nonenone

• Multi Line Wrap

This property specifies what happens with children that are stacked outside of the border of the node.

DataDescription
OffChildren are stacked beyond the boundaries of the node. If Clip is enabled they will not be visible.
OnChildren are wrapped to the next row or column (depending on layout direction).
On ReverseSame as On but opposite layout direction.

• Gap

This property is used to add spacing between children in the group.

DataDescription
Vertical GapVertical space between children. Shown if Layout is set to Vertical or Multi Line Wrap is On.
Horizontal GapHorizontal space between children. Shown if Layout is set to Horizontal or Multi Line Wrap is On.

• Clip content

This property controls if elements that are too big to fit inside the node will be clipped.

If disabled, a group will always expand to contain all of its children. So if the children are taller than the size of the group, the group will expand and be larger than its specified size.

Align and justify content

This Gadget controls how children are aligned and justified by default. Children can override these settings with their Alignment input.

The first set of options control cross-axis alignment, meaning vertical alignment for horizontal layouts, and horizontal alignment for vertical layouts. From left to right, the options are:

OptionDescription
Align items startChildren are stacked at the start of the parent.
Align items centerChildren are stacked at the center of the parent.
Align items endChildren are stacked at the end of the parent.

The second set of options control alignment in the same direction as the layout. From left to right, the options are:

OptionDescription
Justify content startChildren are stacked at the start of the parent.
Justify content centerChildren are stacked at the center of the parent.
Justify content endChildren are stacked at the end of the parent.
Justify content space betweenChildren are evenly distributed. No space is added between the parent and the first and last child.
Justify content space aroundChildren are evenly distributed. Space is added between the parent and the first and last child.
Justify content space evenlyChildren are evenly distributed with equal space between them.

Scroll

This Gadget controls how scrolling should be handled within the node.

DataDescription
Enable ScrollThis specifies if the node should have scrolling enabled for children that overflow outside of the nodes boundaries. Scrolling direction is determined by the nodes Layout direction. Enabling this will show the scrolling properties below.
DataDescription
Native Platform ScrollWhen enabled, uses the web's native scrolling dependent on the platform. Uses custom Noodl scrolling when disabled. The custom Noodl scrolling is platform independent and has both touch and mouse support.
Show ScrollbarOnly available if Native Platform Scroll is disabled. Toggles the visibility of the scrollbar.
Bounce at boundariesOnly available if Native Platform Scroll is disabled. Toggles if scrolling bounces when you are at top or bottom of list.
SnapOnly available if Native Platform Scroll is disabled. Enabling this will snap the scrolling between every screen.
Snap To Every ItemOnly available if Snap is enabled. Enabling this will force the scrolling to snap to individual items.

Text Style

DataDescription
Text StyleSet an existing text style to this node, or create a new text style from the current properties.
Font FamilyThe font family of the text to display. Choose a font in the project folder or type font name.
Font SizeThe size of the font of the text to be displayed, in px.
ColorThe color of the text to be displayed.
Letter spacingThe distance between letters in the string to be displayed. Can be specified in the following units:

px: Pixels. This is CSS pixels, so one pixel will be two physical pixels on a retina display
em: Relative to the font size. 1em is the same as the current font size
Line heightThe line height of the string, if the string is on multiple lines. Can be specified in the following units:

No unit: Relative to the current font size. Preferred way to set line height
px: Pixels. This is CSS pixels, so one pixel will be two physical pixels on a retina display
%: Percentage
CaseControl how to capitalize the text:

None: Characters are unmodified
Uppercase: All characters will be uppercase
Lowercase: All characters will be lowercase
Capitalize: The first letter of each word will be converted to uppercase

Style

This Gadget controls basic styling of the node.

DataDescription
OpacityThe opacity of the node. 0 is completely transparent and invisible. 1 is completely solid and opaque.
Background ColorSpecifies the background color for this node.
VisibleToggle the visibility of this node on and off.
zIndexThe depth index for this node, this can be any number.
Blend ModeControls how this element should blend with the elements behind it. The blend mode can be set to one of the following: Multiply Normal Screen Overlay Darken Lighten Color Dodge Color Burn Hard Light Soft Light Difference Exclusion Hue Saturation Color Luminosity

Border Style

The Border Style Gadget is used to style the borders.

You can select to style all borders at once, or only style individual borders. The styling for the individual borders will override the all-borders option.

DataDescription
Border StyleSpecifies whether this node should have a border and what it should look like. The options are None, Solid, Dotted and Dashed.
Border WidthThe width of the border. Only available if Border Style is set to have a border.
Border ColorThe color of the border. Only available if Border Style is set to have a border.

Corner Radius

The Corner Radius Gadget is used to round the corners of the node.

You can select to set the corner radius all corners at once, or only style individual corners. The styling for the individual corners will override the all-corners option.

The corner radius is specified in px or % of the nodes width.

Box Shadow

You use the Box Shadow Gadget to set the shadow behind or inside of the node.

DataDescription
Shadow EnabledEnables and disables the shadow.
Offset XThe horizontal offset of the shadow. A positive value puts the shadow on the right side of the node, a negative value puts the shadow on the left side of the node.
Offset YThe vertical offset of the shadow. A positive value puts the shadow below the node, a negative value puts the shadow above node.
Blur RadiusThe blur radius. The higher the number, the blurrier the shadow will be.
Spread RadiusThe spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
InsetChanges the shadow from an outer shadow (outset) to an inner shadow.
Shadow ColorThe color of the shadow.

Placement

The Placement Gadget lets you offset, rotate and scale the node. It uses CSS Transforms under the hood, meaning that the nod will still take up the original size and position in the visual tree.

DataDescription
Pos XThe X position of the node. Either relative to its parent top left corner or relative to its layout position depending on the Position property. Can be specified in pixels or as a percentage of its parent's width.
Pos YThe Y position of the node either relative to its parent's top left corner or relative to its layout position depending on the Position property. Can be specified in pixels or as a percentage of its parent's height.
RotationThe rotation in degrees.
ScaleSpecifies scaling of this node. A value of 0 scales the node down completely so that it is no longer be visible. A value of 1 gives it the original size, and a value of 2 doubles the size and so on.
Transform Origin XSpecifies the X position, within this node, that will be the center for rotation and scale. By default it is the center of the node (i.e. 50%) but you can specify an arbitrary value in either percentage of the node's width or explicitly in pixels.
Transform Origin YSpecifies the Y position, within this node, that will be the center for rotation and scale. By default it is the center of the node (i.e. 50%) but you can specify an arbitrary value in either percentage of the node's height or explicitly in pixels.

Dimension Constraints

The Dimension Constraints Gadget allows you to clamp the values of the Dimensions Gadget.

DataDescription
Min WidthThe minimum width that can be assumed by growing with children or parent. Can be specified in % or pixels, or vw which is percentage of window width.
Max WidthThe maximum width that can be assumed by growing with children or parent. Can be specified in % or pixels, or vw which is percentage of window width.
Min HeightThe minimum height that can be assumed by growing with children or parent. Can be specified in % or pixels, or vh which is percentage of window height.
Max HeightThe maximum height that can be assumed by growing with children or parent. Can be specified in % or pixels, or vh which is percentage of window height.

Focus

SignalDescription
FocusFocuses this node. Will trigger the Focused signal output on this node, as well as Focused Lost on other nodes that now lost focus.

Other

DataDescription
Pointer Events ModeThis specifies how this node responds to pointer events.

Inherit sets the node to respond to pointer events in the same way as its parent.
Explicit sets the node to respond to pointer events as specified by Pointer Events Enabled.
Pointer Events EnabledThis property is only available if Pointer Events Mode is set to Explicit. It will specify if this node responds to pointer events or not. If set to false this node will completely ignore pointer events.
Block Pointer EventsThis will cause this node to block all pointer events, e.g. any node that is behind this node will not receive pointer events.
MountedThis property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the visual tree. It differs from the Visible property where the node is still part of the visual tree but invisible.

Advanced Style

DataDescription
CSS ClassSpecify a CSS class this node will have.
CSS StyleUse this property to specify your custom CSS.

Visual Output Properties

Scrolling

DataDescription
Scroll PositionThe current position of scrolling in pixels.
SignalDescription
Scroll StartSignal emitted when scrolling starts.
Scroll EndSignal emitted when scrolling ends.

Bounding Box

DataDescription
Screen Position XWhere this node is on the screen's X-axis, in px.
Screen Position YWhere this node is on the screen's Y-axis, in px.
WidthCurrent width of this node.
HeightCurrent height of this node.

Mounted

SignalDescription
Did MountSignal sent when this node has been mounted, i.e. has become part of the visual tree and is visible.
Will UnmountSignal sent when this node is about to be removed from the visual tree and become hidden.

Pointer Events

SignalDescription
ClickTriggered when the node is clicked or tapped.
Pointer DownTriggered when the mouse is pressed or finger is down on the node.
Pointer UpTriggered when the mouse is released or finger is lifted on the node.
Pointer EnterTriggered when the mouse enters the node.

Hover Events

SignalDescription
Hover StartTriggered when the mouse enters the node.
Hover EndTriggered when the mouse leaves the node.

Focus

SignalDescription
FocusedTriggered when the node, or one if its descendants, is clicked, or if the Focused input is triggered.
BlurredTriggered when this node had focus and another node gained focus. Focus is only lost if the new focused node is not a descendant.

Other

DataDescription
Child IndexThe place this node has in relation to its parent. E.g. if a Group has three children, then the first child will have Child Index 0, the second child will have Child Index 1, and so on.
ThisA reference to this node. Used in custom JavaScript nodes and more.