---
url: https://gudhub.com/uk/docs/gh-elements/radio-button/
title: "Radio Button\n                #"
description: "Radio Button is a gh element that allows to add the set of different buttons and select one of them. Also, you can customize the buttons. This useful item allow"
lang: uk
updated: 2026-09-11T09:47:46.735Z
---

# Radio Button [#](https://gudhub.com/uk/docs/gh-elements/radio-button/#radio-button)

**Radio Button** is a gh-element that allows to add the set of different buttons and select one of them. Also, you can customize the buttons.

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

This useful item allows you to set any status for items. It is also used to configure other elements, such as the [task board](https://gudhub.com/uk/docs/gh-elements/task-board/) or [filter tabs](https://gudhub.com/uk/docs/gh-elements/filter-tabs/), and to easily filter items in gh-elements such as [table](https://gudhub.com/uk/docs/gh-elements/table/), [cards](https://gudhub.com/uk/docs/gh-elements/cards/), etc.

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

The value of the radio button is an ID of the option selected by user. It can only be one in the element. The value can be selected in the drop-down list.

Копіювати

```json
{
    "field_value": "4"
}
```

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

Radio button has three sets of options. One of them relate to field, others to values.

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

All field settings that you can configure are standard for all gh-elements. About them you can read in [Setting Overview](https://gudhub.com/uk/docs/understanding-gudhub/gh-elements-structure/setting-overview/).

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

### Options Settings [#](https://gudhub.com/uk/docs/gh-elements/radio-button/#options-settings)

These settings allows to add, update, and delete options of the value.

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

| Name | Description |
| :-- | :-- |
| Name | field that allows to enter the name of the option; [detail...](#name) |
| Color | allows to select the color of the button; [detail...](#color) |
| Edit | contains buttons for updating and deleting existed options; [detail...](#edit) |

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

The name of the option is the name that will be displayed on the button.

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

The color button allows to open the color picker and select the color of the option.

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

This column contains the buttons for editing and deleting options.

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

The group of settings that configure the default value:

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

| Name | Description |
| :-- | :-- |
| Use default value | allows to take advantage the default value; [details...](#use-default-value) |
| Default value | allows you to select the variant of the value that will be used by default; [details...](#default-value) |

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

This setting allows you to use the default value of this element.

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

This setting allows you to enter the value that will be used as a default value.

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

The radio button element has all standard style settings that you may have already seen in [Setting Overview](https://gudhub.com/uk/docs/understanding-gudhub/gh-elements-structure/setting-overview/). Also, it has a list of interpretation types those are described [below](#interpretation).

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

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

The whole uniqueness of its data model lies in the array of options.

Копіювати

```json
{
    "data_model":{
        "interpretation": [],
        "options": [{
            "name": "In Process", 
            "value": 0, 
            "color": "#FF0000"
        }],
        "use_default_value": false
    }
}
```

| Name | Type | Description |
| :-- | :-- | :-- |
| interpretation | `array` | _contains all element interpretation types_ |
| options | `array` | _contains all data of every option_ |
| name | `string` | _contains options name_ |
| value | `number` | _unique ID of element options in the element_ |
| color | `string` | _contains hex code of the selected color_ |
| use\_default\_value | `boolean` | _shows whether a default value is used_ |

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

Radio button fields can be filtered out by filters that deal with full values:

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

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

A most interpretation types of voting element has color text, background, or the both. The color of each option is set in the [Field Settings](#field-settings).

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

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

This interpretation allows to display value options as rectangular blocks with strongly rounded conners. The selected option is displayed in a color background and with the white text.

### inputOne [#](https://gudhub.com/uk/docs/gh-elements/radio-button/#inputone)

Due to this interpretation the value options are displayed as rectangular blocks with slightly rounded corners. The unselected option is displayed as a color text on the white background. The selected one is contrary, white text on the color background.

### inputList [#](https://gudhub.com/uk/docs/gh-elements/radio-button/#inputlist)

This is a type that allows to display the only selected value with color background and white text. The shape of value block is rectangular blocks with strongly rounded conners.

### InputSquare [#](https://gudhub.com/uk/docs/gh-elements/radio-button/#inputsquare)

The selected value is displayed as rectangular blocks with slightly rounded conners, color background and white text.

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

This is the interpretation type that displayed only the selected value as an uneditable text.

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

The last interpretation type displays the selected value of the element.