field.button-radio-group

Adds buttons for selecting an answer option. This is useful if there are several options. You can add just one button, but it's easier to use field.button-radio for that.

The button size depends on the length of the text.

View example in the sandbox.

Component properties

NameTypeDescription
type*"field.button-radio-group"

Set component type

data*writable

Data with values that will be processed or changed.

labelstring

Label above the component.

disabledboolean

This property prevents clicking the button. If the value is true, the button is not active (the user will not be able to click it).

hintstring

Hint text.

options*array

An array of buttons.

options[]object

A button.

options[].hintstring

Additional information.

options[].label*string

The text on the button.

options[].value*any

Returned value.

rtlobject

In some languages, like Arabic or Hebrew, text is written from right to left. Use this property to set up the correct display mode for the component.

View example in the sandbox.

Learn more about RTL languages.

rtl.modestring

Display mode:

  • ltr — left to right.
  • rtl — right to left.

The chosen value will be added to the dir attribute in the component's HTML code. Learn more about dir.

validationcondition

Validation based on condition.

NameTypeDescription
type*"field.button-radio-group"

Set component type

data*writable

Data with values that will be processed or changed.

labelstring

Label above the component.

disabledboolean

This property prevents clicking the button. If the value is true, the button is not active (the user will not be able to click it).

hintstring

Hint text.

options*array

An array of buttons.

options[]object

A button.

options[].hintstring

Additional information.

options[].label*string

The text on the button.

options[].value*any

Returned value.

rtlobject

In some languages, like Arabic or Hebrew, text is written from right to left. Use this property to set up the correct display mode for the component.

View example in the sandbox.

Learn more about RTL languages.

rtl.modestring

Display mode:

  • ltr — left to right.
  • rtl — right to left.

The chosen value will be added to the dir attribute in the component's HTML code. Learn more about dir.

validationcondition

Validation based on condition.