# Choice Group

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

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

## Properties

### alignment

Alignment of the choice group options; for example, 'vertical' or 'horizontal'. Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) Default Value: "vertical"

***

### dataProviderID

A choice group input component shows a group of checkboxes, each one for one of the values from a provided value list; it will have in it's attached dataprovider the selected values as a carriage return-separated string. Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### enabled

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

***

### inputType

Type of input for the choice group; typically 'checkbox' or 'radio'. Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) Default Value: "checkbox"

***

### showAs

Option whether choice text is shown as plain text, sanitized html or trusted html (as is). Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

***

### styleClass

Set the styleclasses that should be applied at to this component Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass) Default Value: "checkbox"

***

### tabSeq

Tab sequence order for keyboard navigation. Type: [Tabseq](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tabseq)

***

### toolTipText

Tooltip text displayed when hovering over the choice group. Type: [Tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)

***

### valuelistID

Identifier for the value list that provides the available options. Type: [Valuelist](https://docs.servoy.com/servoy-developer/component_and_service_property_types#valuelist)

***

### visible

Whether the button is visible or not Type: [Visible](https://docs.servoy.com/servoy-developer/component_and_service_property_types#visible)

***

## Events

### onActionMethodID(event)

Fired when an action occurs in the choice group such as when the selection changes.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object containing details about the action event (e.g. target element, event type)

***

### 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)

**Parameters:**

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

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

***

### onFocusGainedMethodID(event)

Fired when the choice group gains focus.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object containing details about the focus gained event (e.g. target element, timestamp)

***

### onFocusLostMethodID(event)

Fired when the choice group loses focus.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object containing details about the focus lost event (e.g. target element, timestamp)

***

## API

### requestFocus(mustExecuteOnFocusGainedMethod)

Request the focus to this choicegroup.

**Example:**

```js
myElement.requestFocus();
```

**Parameters:**

> * {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)} \[mustExecuteOnFocusGainedMethod] if false will not execute the onFocusGained method; the default value is true

***

***