Graphical Radio Button

   MaestroThe UI design product.  |   Form Builder |  All versions This feature is related to all versions.

Maestro comes with the Graphical Radio Button component (widget), which allows you to specify not only a text caption, but also an image from a predefined list of images or your own rich content. The Graphical Radio Button component replaces the usual radio button component. If you want to use a composite image, you can create a shared style for your Graphical Radio Button components and adding appropriate style rules to create and show this. You will need to factor in all the states so that the image is shown correctly when selected, not selected, hover, focus, active, disabled, error and so on. You can use different images for the selected and non-selected states, but we recommend using a single image.

Note

Graphical Radio Buttons are restricted to being used inside Graphical Radio Button Groups.

Usage

  1. Open the Palette pane in the Maestro Editor.
  2. Locate the Graphical Radio Button component within the Input Fields folder.
  3. Drag the component into the View pane or the Wireframe.
  4. Configure the component's properties via the Properties pane.

Properties

The following properties are available to the Graphical Radio Button component:

Button Value
Text
value

Enter the value for this radio button

Appearance

Selected Icon Class
Icon
selectedIconClass

Selected icon class name

Unselected Icon Class
Icon
unselectedIconClass

Unselected icon class name

Image

Button Image
Image
src

Select from the available images resources, or upload a new one

Button Selected Image
Image
srcSelected

Select from the available images resources, or upload a new one

Alternative Text
Text
alternativeText

Type an alternative text for informative images, leave blank for decorative images.

Next, learn about the Graphical Radio Button Group component.