Tutorial EzLang RadioButton

A radio button is a clickable switch that can be either on or off. The difference with the checkbox is that the radio button is meant to be part of a group (which can be set using the 'group' EzLang property). Only one radio button can be active in a group, so when the user activates one, the others will become inactive. To make the radio buttons functional, bind 'on_value_change' callbacks to each button in the group. More info on callbacks is given in the scheduler chapter, but an example will be given here. Only the radio button that became active will receive an 'on_value_change' event.

The look of the radio button can be altered through the 'active_symbol' and 'inactive_symbol' properties.

Regular radio button group

// These are regular radio buttons
- Layout:
    mode: box
    orientation: horizontal
    auto_scale: true, true
    padding_bottom: 1
    border: true
    - RadioButton:
        active: true
        group: regular
        fg_color: yellow
        selection_order: 1
    - Label:
        text: Option 1
        auto_scale: true, true
        padding_right: 1
    - RadioButton:
        group: regular
        fg_color: yellow
        selection_order: 2
    - Label:
        text: Option 2
        auto_scale: true, true
        padding_right: 1
    - RadioButton:
        group: regular
        fg_color: yellow
        selection_order: 3
    - Label:
        text: Option 3
        auto_scale: true, true

Styled radio button group

// These are styled radio buttons
- Layout:
    mode: box
    orientation: horizontal
    auto_scale: true, true
    padding_bottom: 1
    border: true
    - RadioButton:
        active: true
        group: styled
        fg_color: yellow
        selection_order: 4
        active_symbol: ✓
        inactive_symbol: x
    - Label:
        text: Option 1
        auto_scale: true, true
        padding_right: 1
    - RadioButton:
        group: styled
        fg_color: yellow
        selection_order: 5
        active_symbol: ✓
        inactive_symbol: x
    - Label:
        text: Option 2
        auto_scale: true, true
        padding_right: 1
    - RadioButton:
        group: styled
        fg_color: yellow
        selection_order: 6
        active_symbol: ✓
        inactive_symbol: x
    - Label:
        text: Option 3
        auto_scale: true, true

Disabled radio button group

// These are Disabled radio buttons
- Layout:
    mode: box
    orientation: horizontal
    auto_scale: true, true
    padding_bottom: 1
    border: true
    - RadioButton:
        active: true
        group: disabled
        fg_color: yellow
        selection_order: 7
        disabled: true
    - Label:
        text: Option 1
        auto_scale: true, true
        padding_right: 1
    - RadioButton:
        group: disabled
        fg_color: yellow
        selection_order: 8
        disabled: true
    - Label:
        text: Option 2
        auto_scale: true, true
        padding_right: 1
    - RadioButton:
        group: disabled
        fg_color: yellow
        selection_order: 9
        disabled: true
    - Label:
        text: Option 3
        auto_scale: true, true

Radio button group with callbacks

// These radio buttons with on_value_change callbacks, they change the label below them
- Layout:
    mode: box
    orientation: vertical
    auto_scale: true, true
    border: true
    - Layout:
        mode: box
        orientation: horizontal
        auto_scale: true, true
        padding_bottom: 1
        - RadioButton:
            id: my_radio_1
            active: true
            group: callback
            fg_color: yellow
            selection_order: 10
        - Label:
            text: Option 1
            auto_scale: true, true
            padding_right: 1
        - RadioButton:
            id: my_radio_2
            group: callback
            fg_color: yellow
            selection_order: 11
        - Label:
            text: Option 2
            auto_scale: true, true
            padding_right: 1
        - RadioButton:
            id: my_radio_3
            group: callback
            fg_color: yellow
            selection_order: 12
        - Label:
            text: Option 3
            auto_scale: true, true
    - Label:
        text: Choice: Option 1
        id: my_label
        auto_scale: true, true

Continue

The general tutorial continues with: EzLang Dropdown.