mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 07:12:53 +01:00
118 lines
7.5 KiB
Markdown
118 lines
7.5 KiB
Markdown
---
|
|
hide_title: true
|
|
hide_table_of_contents: true
|
|
title: Radio Button node
|
|
---
|
|
|
|
<##head##>
|
|
|
|
# Radio Button
|
|
|
|
This node places a radio button in the visual tree. The <span className="ndl-node">Radio Button</span> must be placed in a <span className="ndl-node">Radio Button Group</span> node to function properly.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
You must specify a unique <span className="ndl-data">Value</span> for each <span className="ndl-node">Radio Button</span> node. Only one <span className="ndl-node">Radio Button</span> in a <span className="ndl-node">Radio Button Group</span> can be selected at once.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<##head##>
|
|
|
|
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.
|
|
|
|
<div className="ndl-image-with-background s">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
## Inputs
|
|
|
|
The main input of the Radio Button node is the <span className="ndl-data">Value</span> input:
|
|
|
|
| Data | Description |
|
|
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-data">Value</span> | The 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. |
|
|
| <span className="ndl-data">Background Color</span> | The background color when the radio button is "checked". |
|
|
|
|
It can be enabled and disabled using the <span className="ndl-data">Enabled</span> input:
|
|
|
|
@include "../../shared-props/inputs/_enabled.md"
|
|
|
|
The Checkbox node has a set of label properties that can be set:
|
|
|
|
| Data | Description |
|
|
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
| <span className="ndl-data">Enable Label</span> | Sets whether the label is visible or not. |
|
|
| <span className="ndl-data">Text Style</span> | Set an existing text style to this node, or create a new text style from the current properties. |
|
|
| <span className="ndl-data">Label</span> | A text string that will be shown as the label on the button. |
|
|
| <span className="ndl-data">Spacing</span> | The spacing between the label and the checkbox. |
|
|
|
|
Similarly, it has a set of icon properties:
|
|
|
|
| Data | Description |
|
|
| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-data">Enable Icon</span> | Sets whether the icon is visible or not. |
|
|
| <span className="ndl-data">Type</span> | Use this to set if you want to use a predefined `icon` or a custom `image` from the project folder. |
|
|
| <span className="ndl-data">Source</span> | Where to get the icon. |
|
|
| <span className="ndl-data">Placement</span> | Sets whether the icon should be to the `left` or to the `right` of the _Label_ |
|
|
| <span className="ndl-data">Size</span> | The width of the icon in `px`. |
|
|
| <span className="ndl-data">Color</span> | Sets the color of the icon. Only visible if _Type_ is set to `icon`. |
|
|
|
|
### Visual
|
|
|
|
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/):
|
|
|
|
- [Margin](/nodes/shared-props/inputs/visual-input-properties/#margin)
|
|
- [Padding](/nodes/shared-props/inputs/visual-input-properties/#padding)
|
|
- [Alignment](/nodes/shared-props/inputs/visual-input-properties/#alignment)
|
|
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties/#dimensions)
|
|
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties/#-position)
|
|
- [Style](/nodes/shared-props/inputs/visual-input-properties/#style)
|
|
- [Border Style](/nodes/shared-props/inputs/visual-input-properties/#border-style)
|
|
- [Corner Radius](/nodes/shared-props/inputs/visual-input-properties/#corner-radius)
|
|
- [Box Shadow](/nodes/shared-props/inputs/visual-input-properties/#box-shadow)
|
|
- [Placement](/nodes/shared-props/inputs/visual-input-properties/#placement)
|
|
- [Other](/nodes/shared-props/inputs/visual-input-properties/#other)
|
|
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties/#advanced-html)
|
|
|
|
## Outputs
|
|
|
|
The main output of the Radio Button node is the <span className="ndl-data">Checked</span> output.
|
|
|
|
| Data | Description |
|
|
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| <span className="ndl-data">Checked</span> | A 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 <span className="ndl-signal">signals</span>:
|
|
|
|
@include "../../shared-props/outputs/_control-events.md"
|
|
|
|
### States
|
|
|
|
Apart from triggering <span className="ndl-signal">signals</span> the Checkbox node also notifies of its state through <span className="ndl-data">data</span> outputs:
|
|
|
|
@include "../../shared-props/outputs/_control-states.md"
|
|
|
|
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
|
|
|
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
|
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
|
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
|
|
|
<div className="hidden-props-for-editor">
|
|
|
|
@include "../../shared-props/inputs/_visual-input-properties.md"
|
|
|
|
@include "../../shared-props/outputs/_visual-output-properties.md"
|
|
|
|
</div>
|