# Radio Buttons

<img src="/files/kofwyUaq367WhAhBXwQM" 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="/files/OH4E8TFyrMCLCL42iGPE" 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="/files/LDMiuFR9pqm5mnWCO6Hc" 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="/files/qs1yj1ciUIMlT1r2PlCd" alt="" data-size="line">, <mark style="color:green;">**Focused**</mark> <img src="/files/aQGOj81EpEZakH8HU0bB" alt="" data-size="line">, <mark style="color:yellow;">Hover</mark> <img src="/files/L5HnbDfJXfUZaKLktsx2" alt="" data-size="line">, <mark style="color:orange;">**Pressed**</mark> <img src="/files/BMJmdEN5klDGSqNf10nm" alt="" data-size="line">, and <mark style="color:red;">**Disabled**</mark> <img src="/files/SdivXyRAaO6SSMWlXC0d" 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="/files/brZp5fwBdTkNQACPPkfU" alt="" data-size="line">, <mark style="color:green;">**Focused**</mark> <img src="/files/rdd1B8nFdH33kjE3zNRq" alt="" data-size="line">, <mark style="color:yellow;">Hover</mark> <img src="/files/w5GNwRfLxAND4t7CSjvn" alt="" data-size="line">, <mark style="color:orange;">**Pressed**</mark> <img src="/files/S73Il26sOXAWHDRoIyQe" alt="" data-size="line">, and <mark style="color:red;">**Disabled**</mark> <img src="/files/0xhWjnOSmXWpln2xymlw" 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="/files/kofwyUaq367WhAhBXwQM" 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**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://smartui-docs.pixelperfectstudio.mx/framework-addons/radio-buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.