Radio buttons

Last updated on 03/04/2024

Radio buttons

Overview

Radio buttons are not very user-friendly, especially on mobile devices. We recommend using the Select Action option to achieve the same goal. However, if you need to use Radio Buttons, click on the Forms button on top of the Canvas and select Radio Buttons from the Form Layers Selector. But for some Radio buttons consists of an outer square box and the radio button within it.

Styling radio button:

Click on the Radio Button to open the Layer Style Editor. Then, navigate to the Style tab and select Radio Button. The following styling options are available.

  1. Border color: Customize the color of the border surrounding the radio button's outer circle.

  2. Border width: Set the thickness of the outer border of the radio button

  3. Outer circle color: Set the color of the radio button's outer circle

  4. Inner circle radius: Adjust the size of the radio button's inner circle by modifying its radius.

  5. Inner circle unchecked color: Define the color of the inner circle when the radio button is not selected.

  6. Inner circle checked color: Checked inner circle color: Set the color of the inner circle when the radio button is selected.

Styling outer box:

Click on the radio button to open the Layer Style Editor. Then, navigate to the Style tab and select Outer box Button. The following styling options are available.

  1. Color: Choose a color for the background of the radio button's outer square box.

  2. Border: Customize the border of the outer box by selecting a color, adjusting its thickness

  3. Opacity: Adjust the transparency level of the outer box.

Styling Radio Button Labels:

Radio buttons and Checkboxes are paired with Labels, which are like Text Layers and share the same styling options. To style a Label, click on it to open the Layer Style Editor and adjust the styling just as you would with a Text Layer.