ButtonGroup

A ButtonGroup is a set of two or more buttons that are grouped together. Only one button in the group can be selected at a time, and selecting a button will automatically deselect any other button that is currently selected.

Use a ButtonGroup when you have 2-5 options and you want the user to see all of them at once.

Examples

Metric conversion

Here’s an example of a ButtonGroup that allows the user to select a unit of measurement for converting a distance value. When the user clicks on a button, we update the selected unit and display the converted distance in that unit.

import gooeypie as gp

app = gp.GooeyPieApp("Metric conversion")

def convert(event):
    try:
        value = float(unit_entry.text)
        unit = unit_button.selected
        if unit == "inches":
            converted_label.text = f"{value} inches = {value * 2.54:0.4f} cm"
        elif unit == "feet":
            converted_label.text = f"{value} feet = {value * 0.3048:0.4f} m"
        elif unit == "miles":
            converted_label.text = f"{value} miles = {value * 1.60934:0.4f} km"
    except ValueError:
        converted_label.text = "Please enter a valid number"

# Create widgets
unit_entry = gp.Entry()
unit_button = gp.ButtonGroup(["inches", "feet", "miles"])
converted_label = gp.Label("")

# Call convert when the unit changes or the entry changes
unit_button.on_change(convert)
unit_entry.on_change(convert)

# Add widgets to the app
app.add(unit_entry, 1, 1)
app.add(unit_button, 2, 1)
app.add(converted_label, 1, 2, column_span=2)

app.run()

Creating a ButtonGroup widget

my_button_group = gp.ButtonGroup(button_labels)

Parameters

button_labels (list of strings): The labels for the buttons in the group. The number of items in the list determines how many buttons are in the group.

Properties

Name	Type	Description
`.selected`	string	Gets or sets the label of the currently selected button in the group. Setting this property will change the selected button to the one with the specified label.
`.width`	integer	Gets or sets the width of the button group in pixels.
`.height`	integer	Gets or sets the height of the button group in pixels.
`.disabled`	boolean	Gets or sets whether the button group is disabled. When disabled is set to `True`, the buttons in the group do not respond to click events.

Methods

This widget has no unique methods.

Events

This widget supports the following events as well as the standard events listed below.

Name	Description
`.on_change(event_function)`	The function to call when the selected button in the group changes. This event is triggered whenever the user clicks on a button in the group or when the selected button is changed programmatically.

Standard events

.on_click
.on_double_click
.on_right_click
.on_middle_click
.on_mouse_down
.on_mouse_up
.on_mouse_enter
.on_mouse_leave

Styles

How to specify colors

Colors can be specified as either a hex code (e.g. "#FF0000"), a CSS color name, or "transparent".
When specifying a color for a style, you can provide either a single color or two colors separated by a comma. If you provide two colors, the first will be used for light mode and the second for dark mode. For example, my_widget.text_color = "steelblue", "skyblue" would specify steelblue for light mode and sky blue for dark mode.

Name	Description	Default
`.style.bg_color`	The background color of the button group.
`.style.border_width`	The width of the border of the button group.	`3`
`.style.corner_radius`	The radius of the corners of the button group.	`6`
`.style.font_name`	The font of the text of the buttons. Either an installed font or a generic font name: `"serif"`, `"sans-serif"`, `"monospace"` or `"system"`	`"system"`
`.style.font_size`	The size of the text of the buttons.	`12`
`.style.font_weight`	The weight of the text of the buttons. Either `"normal"` or `"bold"`.	`"normal"`
`.style.font_style`	The style of the text of the buttons. Either `"normal"` or `"italic"`.	`"normal"`
`.style.text_color`	The color of the text of the buttons.
`.style.text_disabled_color`	The color of the text of the buttons when they are disabled.
`.style.selected_color`	The color of the selected button in the group.
`.style.selected_hover_color`	The color of the selected button in the group when hovered over.
`.style.selected_disabled_color`	The color of the selected button in the group when it is disabled.
`.style.unselected_color`	The color of the unselected buttons in the group.
`.style.unselected_hover_color`	The color of the unselected buttons in the group when hovered over.
`.style.unselected_disabled_color`	The color of the unselected buttons in the group when they are disabled.