---
url: https://gudhub.com/docs/gh-elements/radio-icon/
title: "Radio Icon\n                #"
description: "Radio Icon is a gh element that allows to set the value options and select one of them in application. These options are displayed as color icons. This element"
lang: uk
updated: 2026-09-08T15:57:30.792Z
---

# Radio Icon [#](https://gudhub.com/docs/gh-elements/radio-icon/#radio-icon)

**Radio Icon** is a gh-element that allows to set the value options and select one of them in application. These options are displayed as color icons.

## Functional Characteristics [#](https://gudhub.com/docs/gh-elements/radio-icon/#functional-characteristics)

This element can be used to label elements, divide them into categories and give them different statuses. This also allows you to make useful [filter tabs](https://gudhub.com/docs/gh-elements/filter-tabs/) for different items or separate items by column in items such as [task board](https://gudhub.com/docs/gh-elements/task-board/).

## Value Format [#](https://gudhub.com/docs/gh-elements/radio-icon/#value-format)

As a value, the radio button contains the ID of the selected option.

Copy

```json
{
    "field_value": "5"
}
```

## Element Options [#](https://gudhub.com/docs/gh-elements/radio-icon/#element-options)

The radio button options are divided into three groups.

### Field Settings [#](https://gudhub.com/docs/gh-elements/radio-icon/#field-settings)

Besides standard settings like Field Name and Name Space, this group includes only one extra one:

![Settings of radio icon field](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/radio-icon-field-settings.jpg "Radio icon field settings")

| Name | Description |
| :-- | :-- |
| Multiple value | allows to select the multiple value |

#### **Multiple value** [#](https://gudhub.com/docs/gh-elements/radio-icon/#multiple-value)

The multiple value for a radio icon means that the user can select as many icons for as many values as he wants.

### Option Settings [#](https://gudhub.com/docs/gh-elements/radio-icon/#option-settings)

![Settings of radio icon options](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/radio-icon-options-settings.jpg "Radio icon option settings")

| Name | Description |
| :-- | :-- |
| Name | allows to enter the name of the field; [detail...](#name) |
| Icon | allows to select the icon of the option; [detail...](#icon) |
| Color | allows to select the color of the icon; [detail...](#color) |
| Edit | contains two buttons for editing and deleting the option; [detail...](#edit) |

#### **Name** [#](https://gudhub.com/docs/gh-elements/radio-icon/#name)

This is the name of radio icon option that is used for filtration. In some interpretations, it is displayed below the icon or by itself.

#### **Icon** [#](https://gudhub.com/docs/gh-elements/radio-icon/#icon)

The icon of the element option is the main feature of radio icon. You can choose it from the full list of icons.

#### **Color** [#](https://gudhub.com/docs/gh-elements/radio-icon/#color)

This setting allows to open the color picker and select the color of the icon.

#### **Edit** [#](https://gudhub.com/docs/gh-elements/radio-icon/#edit)

This is the column tha contains buttons for editing and deleting option.

### Default Value Settings [#](https://gudhub.com/docs/gh-elements/radio-icon/#default-value-settings)

As you might have guessed from the title, these settings are responsible for configuring the default values.

![Settings of radio icon default value](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/radio-icon-default-value-settings.jpg "Radio icon default value settings")

| Name | Description |
| :-- | :-- |
| Use default value | allows to use default value |
| Default value | allows to select the default value |

#### **Use Default Value** [#](https://gudhub.com/docs/gh-elements/radio-icon/#use-default-value)

This setting allows you to use the default value.

#### **Default Value** [#](https://gudhub.com/docs/gh-elements/radio-icon/#default-value)

The default value of the radio icon is one of its icon which was selected in settings.

## Element Style [#](https://gudhub.com/docs/gh-elements/radio-icon/#element-style)

The style of radio icon element has not only standard options but also a few additional. Read [Setting Overview](https://gudhub.com/docs/understanding-gudhub/gh-elements-structure/setting-overview/) for introduction the standard options. The radio icon interpretation is described [below](#interpretation).

![Style of radio icon element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/radio-icon-element-style.jpg "Radio icon element style")

### General Settings [#](https://gudhub.com/docs/gh-elements/radio-icon/#general-settings)

There are extra options for radio icon style. They allows to configure icon size and format.

![General settings of radio icon style](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/radio-icon-general-settings.jpg "Radio icon general settings")

| Name | Description |
| :-- | :-- |
| Image Type | allows to select the type of icon image; [detail...](#image-type) |
| Icon Size(px) | allows to set the icons size; [detail...](#icon-sizepx) |

#### **Image Type** [#](https://gudhub.com/docs/gh-elements/radio-icon/#image-type)

This option allows to image type of icon. It has two possible values: SVG and Canvas.

#### **Icon Size(px)** [#](https://gudhub.com/docs/gh-elements/radio-icon/#icon-size-px)

This option allows to enter the size of the icons in pixels.

## Data Model [#](https://gudhub.com/docs/gh-elements/radio-icon/#data-model)

The most part of the element data model is taken up by options and their properties.

Copy

```json
{
    "data_model": {
        "interpretation": [],
        "multiple_value": 0,
        "options": [{
            "color": "#18a9e8",
            "icon": "invoices",
            "name": "Case 1",
            "value": 0
        }],
        "use_default_value": false
    }
}
```

| Name | Type | Description |
| :-- | :-- | :-- |
| interpretation | `array` | _contains all interpretation types of the element_ |
| multiple\_value | `boolean` | _shows whether the element accepts the multiple values_ |
| options | `array` | _contains all value options and their properties_ |
| color | `string` | _contains he hex code of the selected icon color_ |
| icon | `string` | _contains the name of icon image_ |
| name | `string` | _contains the name of the option_ |
| value | `number` | _contains the option ID_ |
| use\_default\_value | `boolean` | _shows whether the default value is used or not_ |

## Filtration [#](https://gudhub.com/docs/gh-elements/radio-icon/#filtration)

The element could be filtered out by the option name.

-   [Equals(or)](https://gudhub.com/docs/core-api/filter/equals/)
-   [Equals(and)](https://gudhub.com/docs/core-api/filter/equals/)
-   [Not equals(or)](https://gudhub.com/docs/core-api/filter/equals/)
-   [Not equals(and)](https://gudhub.com/docs/core-api/filter/equals/)
-   [Value](https://gudhub.com/docs/core-api/filter/value/)

## Interpretation [#](https://gudhub.com/docs/gh-elements/radio-icon/#interpretation)

This element has lots of interpretation types. Most of them has icons.

![Types of radio icon interpretation](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/radio-icon-interpretation-types.jpg "Radio icon interpretation types")

### Input With Name [#](https://gudhub.com/docs/gh-elements/radio-icon/#input-with-name)

Displays the value options as an icon with the name below.

### Input With Icon [#](https://gudhub.com/docs/gh-elements/radio-icon/#input-with-icon)

This interpretation type allows to display the element options as different icons.

### InputList [#](https://gudhub.com/docs/gh-elements/radio-icon/#inputlist)

Allows to display the value options as an icon with the name below and makes them uneditable.

### Icon One [#](https://gudhub.com/docs/gh-elements/radio-icon/#icon-one)

Displays the icon of the selected value and does not allows to edit it.

### Default [#](https://gudhub.com/docs/gh-elements/radio-icon/#default)

Allows you to display the name of the selected value only.

### Value [#](https://gudhub.com/docs/gh-elements/radio-icon/#value)

The last type displays the selected [field value](#value-format).