# Group Buttons

(part of package '[Bootstrap Extra Components](/reference/servoyextensions/packages/ui-component-packages/bootstrap-extra-components.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

A A group of toggle buttons for single or multiple selection.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### dataProviderID

Bound data provider identifier for the button group component. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)

***

### enabled

Flag indicating whether the button group is enabled for user interaction. Type: [Enabled](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true

***

### inputType

The input type for the button group, determining whether the buttons function as checkboxes or radio buttons. Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "radio"

***

### location

The position of the button group within its parent container, specified as a point. Type: [Point](https://github.com/Servoy/gitbook/blob/master/reference/servoycore/dev-api/js-lib/point.md)

***

### showAs

Determines how the button group is rendered.\
Possible values include "text", "html", or "trusted\_html". Type: [String](/reference/servoycore/dev-api/js-lib/string.md)

***

### styleClass

CSS style classes applied to the button group container. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) Default Value: "btn-default"

***

### tabSeq

Tab sequence order for keyboard navigation within the button group. Type: [Tabseq](/reference/servoy-developer/component_and_service_property_types.md#tabseq)

***

### toolTipText

Tooltip text displayed when hovering over the button group. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### valuelistID

Identifier for the value list that provides the available options for the button group. Type: [Valuelist](/reference/servoy-developer/component_and_service_property_types.md#valuelist)

***

### visible

Flag indicating whether the button group is visible. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

## Events

### onDataChangeMethodID(oldValue,newValue,event)

Handle changed data, return false if the value should not be accepted.\
JSEvent.data will contain extra information about dataproviderid, its scope and the scope id (record datasource or form/global variable scope) - present since 2021.06 release

**Parameters:**

> * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} oldValue The previous value from the data provider
> * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} newValue The new value to be set in the data provider
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the data change

**Returns:** {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)}

***

## API

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/group-buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.