Survey Component: Stylized Radio Button

Survey Component: Stylized Radio Button


The Stylized Radio Button component allows the user to make one selection from a list of options displayed.

The Stylized Radio button differs from the standard Radio Button component in that it allows the ability to add colour, height and width to the different options that are configured.

Configuration Options

Component Type Displays the type of this component.
Label Enter the text to be displayed for the field.
Report Label Enter the text to be displayed as the title when running the survey reports.
Font Size Set the size of the label.
Assistance Enter the text to be displayed as a help.
Orientation Select to display the list of Stylized Radio Buttons horizontally or vertically from the dropdown list.
Width Sets the width of all components in the panel. This value can be entered as a % or in pixels (px)

  • Example: Width can be entered as 50% or as 450px.

Margin Sets the margins around the inside of the component. The margin can be broken down into 4 sections separated by a space. Each section can be entered as a % or in pixels (px). The 4 sections are the margins for: Top, Right, Bottom, Left.

  • Example: The margin can be entered as 5% 5% 5% 5% or as 10px 10px 10px 10px.

Default Value Set the default value for this field. Leave blank if there is no need for a default value.
Field Name Assign the name of the field to be given to this component. This value can be used in setting conditions in other components.
Options Click on the ‘+’ to add to the list of Stylized Radio Buttons to display.

The 5 columns that will be displayed are:

  1. Label This is the the that will be displayed to the user
  2. Value This is the value that will be used in conditions as well as what will be saved in the database.
  3. Color Specify the colour to be set for this option
  4. Height Specify the height to be set for this option as a % or in pixels (px).
  5. Width Specify the width to be set for this option as a % or in pixels (px) .
  • Clicking on the garbage can icon at the end of the row will remove the specified option form the list.

Conditions If the condition returns true, then the component will be visible to the user. If condition returns false, then the component will be hidden to the user. If there is no condition specified, the component will always be displayed.
Mandatory If the toggle switch is on (Blue), the user must enter data into the field in order to continue to the next panel. If this is the last panel, there is the option to specify in the Disposition that data must be entered in order to complete the workitem.

Save Select save to save the changes made and continue editing.
Save & Close Select save & close to save the changes made and close the survey.
Close Select close to cancel the changes made and close the survey.

When selecting a component that has been placed in a panel, there are 3 icons in the top right corner:

  1. Copy The icon on the left will duplicate the component.
  2. Move The icon in the middle, picture of a hand, allows you to dragging and drop the component to a different location in the survey.
  • Note Drag the component over the component that you wish it to be under.
  • You will notice as you hover over existing component that they will have a red border. When you release the button on the mouse your component will be placed right below the one with the red border.
  1. Delete The icon on the right, picture of a garbage can, will delete the component from the panel.


In the following example, we will use a Stylized Radio Button component that has the question: ‘May I ask you a few questions?’
There will be 2 options in the Radio Button list.
One will have a value of: Yes and the other will have a value of No.

For this example, the field name for this Stylized Radio Button component is: agreement

Following the Stylized Radio Button component, we will place a Text component that displays: ‘Thank you for your time, have a nice day.’ if the user selects ‘No’ from the Radio Button component.

The Condition that will be set in the Text component would be as follow:

surveyInformation.agreement.value == ‘No’

  • Note: All variables in the system are case sensitive.

Variable in a survey are broken out in 3 parts:

  • surveyInformation (Only the ‘I’ in the word information is uppercase)
  • FieldName: In this example the FieldName is agreement
  • value
  • The different parts of the variables are separated by a dot (.)

Click Here to Download Linked File

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.