> For the complete documentation index, see [llms.txt](https://smartui-docs.pixelperfectstudio.mx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smartui-docs.pixelperfectstudio.mx/framework-addons/radio-buttons.md).

# Radio Buttons

SmartUI Radio-Button Behavior operation and ACEs.

<img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FpBE2wt5HPHbTkNQ4tsVh%2Ficon.svg?alt=media&amp;token=8901c512-da54-4d08-9195-7c53cc4ef97f" alt="" data-size="line"> Radio buttons provide a practical way to select a value from a list of multiple posibilities. Within the same operational context, you can select only a single radio-button at the time. SmartUI automatically assigns all the radio-buttons in the same context to the same group, without additional intervention.&#x20;

{% hint style="info" %}
Radio-Buttons inherit its features directly from a [<img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2F5YfzVH7v6E3jVux7zUmV%2Ficon.svg?alt=media&amp;token=0abd50f9-12ce-47b5-ae35-5ad101003513" alt="" data-size="line">Checkbox](/framework-addons/checkbox-behavior.md), managing boolean values. Therefore, its state can be either <mark style="color:blue;">checked</mark> or <mark style="color:blue;">unchecked</mark>.&#x20;
{% endhint %}

To create additional contexts, you must add all the desired radio-buttons to an object using the <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FhCohGREFv7teWhZaQFr2%2Ficon.svg?alt=media&amp;token=a77bfb79-1553-466a-a108-cf672de16ad0" alt="" data-size="line">[Smart UI Container Behavior](/framework-addons/container-behavior.md), to enable navigation and interaction capabilities that propagate the events to all the children of the container.

{% hint style="info" %}
Radio-button behavior handles the following animations for the *<mark style="color:blue;">**Unchecked**</mark>* state:&#x20;

<mark style="color:purple;">**Normal**</mark> <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FgHEEZxZicX059FtHPHy2%2Fg61.png?alt=media&amp;token=aa507869-6507-4b1b-accd-6375b1b44c57" alt="" data-size="line">, <mark style="color:green;">**Focused**</mark> <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FZbzo7chmCCQCtmIofWj9%2Fg68.png?alt=media&amp;token=f4e8a98b-74db-4ef8-951a-980aae2b4fe8" alt="" data-size="line">, <mark style="color:yellow;">Hover</mark> <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2F5r0z9p7upqmLGWQTSBo2%2Fg96.png?alt=media&amp;token=a98ab5bc-dc01-42c3-a6bc-24ef0b156f34" alt="" data-size="line">, <mark style="color:orange;">**Pressed**</mark> <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FsSvD48l6vUVZc0YHi7OE%2Fg78.png?alt=media&amp;token=787dcf77-e661-48b1-a13f-b1247759567b" alt="" data-size="line">, and <mark style="color:red;">**Disabled**</mark> <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2F7FyNB64F6WrjdIucwhva%2Fg110.png?alt=media&amp;token=a9666592-15c3-4ed6-9fa7-b86e65a077ae" alt="" data-size="line">.
{% endhint %}

{% hint style="info" %}
Radio-buttonbehavior handles the following animations for the *<mark style="color:blue;">**Checked**</mark>* state:&#x20;

<mark style="color:purple;">**Normal**</mark> <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2Fky9DGqhSx2pJC6f6D3xP%2Fg155.png?alt=media&amp;token=365b4613-8293-4173-b40d-b2dea7db5381" alt="" data-size="line">, <mark style="color:green;">**Focused**</mark> <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FUHyHdMDwsj3BeOhAWdyw%2Fg156.png?alt=media&amp;token=96725bc3-268f-41d2-a877-f0428a8bb63f" alt="" data-size="line">, <mark style="color:yellow;">Hover</mark> <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FlAd8gsQNuJb9mXm7rIlH%2Fg158.png?alt=media&amp;token=650804e7-06d3-4be3-b35e-c98f4fbb093b" alt="" data-size="line">, <mark style="color:orange;">**Pressed**</mark> <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FDNgWQB2NVD4nfxjs6ngO%2Fg157.png?alt=media&amp;token=63aeb75f-c3ab-4041-92a7-2a34d0a20a95" alt="" data-size="line">, and <mark style="color:red;">**Disabled**</mark> <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FJrWgOSfBSSzx0EMRLgug%2Fg159.png?alt=media&amp;token=8b711e40-58bd-4336-8a1b-b9af548e46b3" alt="" data-size="line">.
{% endhint %}

<details>

<summary>Download</summary>

<https://store.pixelperfectstudio.mx/product/smart-ui-ncbeta/>

</details>

## :tv:Basic Setup - Tutorial Video

{% embed url="<https://youtu.be/H58Vg0g_0Wk>" %}

## Properties

<table data-header-hidden><thead><tr><th width="254"></th><th></th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td></tr><tr><td><code>Enabled</code></td><td>Enables or Disables the radio-button.</td></tr><tr><td><code>Index</code></td><td>Index of the element within a container. Used for focusing the elements in the sequence order.</td></tr><tr><td><code>Invisible Component</code></td><td>Turns the component opacity to 0 while rendering it to allow invisible interactions.</td></tr><tr><td><code>Automatic-Color</code></td><td>Enables the component to darken a bit when its state is Disabled or when it's focused. Auto-Color is meant to provide a quick identification of the component state. For more specialized customizations, use the component events and disable this check.</td></tr><tr><td><code>Name</code></td><td>Unique name string for identifying the selected radiobutton</td></tr><tr><td><code>On Hover</code></td><td>Animations when hovering</td></tr><tr><td><code>Hover Time</code></td><td>Timelapse to complete the animation in seconds.</td></tr><tr><td><code>Hover Change Factor</code></td><td>Percentage to alter the object properties</td></tr><tr><td><code>On Press</code></td><td>Animations when pressing</td></tr><tr><td><code>Press Time</code></td><td>Timelapse to complete the animation in seconds.</td></tr><tr><td><code>Checked Value</code></td><td>Boolean value of the radio button. It can be either checked or unchecked.</td></tr><tr><td><code>Unchecked Normal Animation</code></td><td>Unchecked Normal animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]</td></tr><tr><td><code>Checked Normal Animation</code></td><td>Checked Normal animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]</td></tr><tr><td><code>Unchecked Disabled Animation</code></td><td>Unchecked Disabled animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]</td></tr><tr><td><code>Checked Disabled Animation</code></td><td>Checked Disabled animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]</td></tr><tr><td><code>Unchecked Press Animation</code></td><td>Unchecked Press animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]</td></tr><tr><td><code>Checked Press Animation</code></td><td>Checked Press animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]</td></tr><tr><td><code>Unchecked Hover Animation</code></td><td>Unchecked Hover animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]</td></tr><tr><td><code>Checked Hover Animation</code></td><td>Checked Hover animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]</td></tr><tr><td><code>Unchecked Focus Animation</code></td><td>Unchecked Focus animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]</td></tr><tr><td><code>Checked Focus Animation</code></td><td>Checked Focus animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]</td></tr><tr><td><code>Press Change Factor</code></td><td>Percentage to alter the object properties</td></tr><tr><td><code>On Restore</code></td><td>Animations when restoring the radio button properties</td></tr><tr><td><code>Restore Time</code></td><td>Timelapse to complete the animation in seconds.</td></tr><tr><td><code>Focusable</code></td><td>Marks if the component can have the focus.</td></tr><tr><td><code>On Focus</code></td><td>Animations when focusing the radio button</td></tr><tr><td><code>Focus Time</code></td><td>Timelapse to complete the animation in seconds.</td></tr><tr><td><code>Focus Change Factor</code></td><td>Percentage to alter the object properties</td></tr></tbody></table>

## <img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FpBE2wt5HPHbTkNQ4tsVh%2Ficon.svg?alt=media&amp;token=8901c512-da54-4d08-9195-7c53cc4ef97f" alt="" data-size="line"> Smart UI Radio Button ACEs

Smart UI Radio Button behavior. Controls the object like a radio button, with values: check, and unchecked. It handles ten diferent sprite animations to match all the states of the object, and can be animated with several built-in animations and easings.&#x20;

## Actions

***

### `Set Check`

Toggles the value of the radio button.

| **Parameter** | **Description**                   |
| ------------- | --------------------------------- |
| `Value`       | Set the value of the radio button |

### `Set Checked Animation`

Sets the animation when restoring the radio button to its normal checked state

| **Parameter**    | **Description**                                    |
| ---------------- | -------------------------------------------------- |
| `Animation name` | Animation name. Only applicable for Sprite objects |

### `Set Check Disabled Animation`

Sets the animation when disabling the radio button

| **Parameter**    | **Description**                                    |
| ---------------- | -------------------------------------------------- |
| `Animation name` | Animation name. Only applicable for Sprite objects |

### `Set Checked Focus Animation`

Sets the animation when focusing the radio button. Focus animation overrides the normal animation if the radio button has the focus.

| **Parameter**    | **Description**                                    |
| ---------------- | -------------------------------------------------- |
| `Animation name` | Animation name. Only applicable for Sprite objects |

### `Set Checked Hover Animation`

Sets the animation when hovering the radio button

| **Parameter**    | **Description**                                    |
| ---------------- | -------------------------------------------------- |
| `Animation name` | Animation name. Only applicable for Sprite objects |

### `Set Checked Press Animation`

Sets the animation when pressing the radio button

| **Parameter**    | **Description**                                    |
| ---------------- | -------------------------------------------------- |
| `Animation name` | Animation name. Only applicable for Sprite objects |

### `Set Enabled`

Disable/Enable the radio button

| **Parameter** | **Description**  |
| ------------- | ---------------- |
| `Enabled`     | Enabled/Disabled |

### `Set Focus`

Sets the focus on the component, removing the focus from all the components within the same container.

### `Set Focus Change Factor`

Sets the animation when focusing the radio button

| **Parameter**   | **Description**                                                        |
| --------------- | ---------------------------------------------------------------------- |
| `Change Factor` | Percentage to alter the object properties. Eg. 0.5 is 50%, 0.1 is 10%. |

### `Set Focus Function`

Sets the animation when focusing the radio button

| **Parameter**        | **Description**                                   |
| -------------------- | ------------------------------------------------- |
| `Animation Function` | Establishes the animation function when focusing. |

### `Set Focus Time`

Sets the animation duration when focusing the radio button

| **Parameter** | **Description**               |
| ------------- | ----------------------------- |
| `Duration`    | Animation duration in seconds |

### `Set Focusable`

Disable/Enable the radio button

| **Parameter** | **Description**                            |
| ------------- | ------------------------------------------ |
| `Focusable`   | Flag to allow the component to be focused. |

### `Set Hover Change Factor`

Sets the animation when hovering the radio button

| **Parameter**   | **Description**                                                        |
| --------------- | ---------------------------------------------------------------------- |
| `Change Factor` | Percentage to alter the object properties. Eg. 0.5 is 50%, 0.1 is 10%. |

### `Set Hover Function`

Sets the animation when hovering the radio button

| **Parameter**        | **Description**                                   |
| -------------------- | ------------------------------------------------- |
| `Animation Function` | Establishes the animation function when hovering. |

### `Set Hover Time`

Sets the animation duration when hovering the radio button

| **Parameter** | **Description**               |
| ------------- | ----------------------------- |
| `Duration`    | Animation duration in seconds |

### `Set Invisible Component`

Turns the component opacity to 0 while rendering it to allow invisible interactions.

| **Parameter**         | **Description**                                                   |
| --------------------- | ----------------------------------------------------------------- |
| `Invisible Component` | Set if the component processed even if it's invisible: True/False |

### `Set Name`

Sets the name of the radio button.

| **Parameter** | **Description**       |
| ------------- | --------------------- |
| `Name`        | Name of the component |

### `Set Press Change Factor`

Sets the animation when pressing the radio button

| **Parameter**   | **Description**                                                        |
| --------------- | ---------------------------------------------------------------------- |
| `Change Factor` | Percentage to alter the object properties. Eg. 0.5 is 50%, 0.1 is 10%. |

### `Set Press Function`

Sets the animation when pressing the radio button

| **Parameter**        | **Description**                                   |
| -------------------- | ------------------------------------------------- |
| `Animation Function` | Establishes the animation function when pressing. |

### `Set Press Time`

Sets the animation duration when pressing the radio button

| **Parameter** | **Description**               |
| ------------- | ----------------------------- |
| `Duration`    | Animation duration in seconds |

### `Set Restore Function`

Sets the animation when restoring the radio button

| **Parameter**        | **Description**                                                                           |
| -------------------- | ----------------------------------------------------------------------------------------- |
| `Animation Function` | Establishes the animation function when restoring the radio button to its original state. |

### `Set Restore Time`

Sets the animation duration when restore the radio button to its original state

| **Parameter** | **Description**               |
| ------------- | ----------------------------- |
| `Duration`    | Animation duration in seconds |

### `Set Index`

Sets the sequence index to influence the selection of components.

| **Parameter** | **Description**                                                                                |
| ------------- | ---------------------------------------------------------------------------------------------- |
| `Index`       | Sequence index value. E.g. Indexes values of 0 are processed before indexes values of 1 and 2. |

### `Set Unchecked Animation`

Sets the animation when restoring the radio button to its normal unchecked state

| **Parameter**    | **Description**                                    |
| ---------------- | -------------------------------------------------- |
| `Animation name` | Animation name. Only applicable for Sprite objects |

### `Set Uncheck Disabled Animation`

Sets the animation when disabling the radio button

| **Parameter**    | **Description**                                    |
| ---------------- | -------------------------------------------------- |
| `Animation name` | Animation name. Only applicable for Sprite objects |

### `Set Unchecked Focus Animation`

Sets the animation when focusing the radio button. Focus animation overrides the normal animation if the radio button has the focus.

| **Parameter**    | **Description**                                    |
| ---------------- | -------------------------------------------------- |
| `Animation name` | Animation name. Only applicable for Sprite objects |

### `Set Unchecked Hover Animation`

Sets the animation when hovering the radio button

| **Parameter**    | **Description**                                    |
| ---------------- | -------------------------------------------------- |
| `Animation name` | Animation name. Only applicable for Sprite objects |

### `Set Unchecked Press Animation`

Sets the animation when pressing the radio button

| **Parameter**    | **Description**                                    |
| ---------------- | -------------------------------------------------- |
| `Animation name` | Animation name. Only applicable for Sprite objects |

### `Hover`

Trigger the hover event of the plugin, simulating the interaction of the user.

### `Stop Hover`

Stops simulating the hover state.

## Conditions

***

### `Is Checked`

Returns true if the radio button is checked

### `Compare Name`

Returns true if the radio button components name equals the parameter

| **Parameter** | **Description**                            |
| ------------- | ------------------------------------------ |
| `Name`        | Name to compare with the component picked. |

### `Is Enabled`

Returns true if the radio button is enabled

### `Is Focused`

Returns true if the radio button has the focus

### `Is Hovered`

Returns true if the radio button is hovering

### `Is Invisible Component`

Returns true if the radio button is configured as an invisible component.

### `Is Pressed`

Returns true if the radio button is being pressed

### `On Changed`

Triggered when the radio-buton value changes. Use it together with Is-Checked condition to react to changes.

### `On Focus`

Triggered when the radio button gets the focus

### `On Focus Lost`

Triggered when the radio button loses focus

### `On Hover`

Triggered when the radio button starts hovering

### `On Hover Lost`

Triggered when the radio button ends hovering

### `On Pressed`

Triggered when the radio button started pressing.

### `On Released`

Triggered when the radio button is released.

### `On Selected`

Triggered when the radio button is selected.

## Expressions

***

### `Name`

Component name

**(c) Pixel Perfect Studio 2024**