# Choice Group
## Overview
A choice group offers values from a provided value list and returns the selected values as a carriage return-separated string to the dataprovider attached. When the value list offers display and return values, the return values are returned.
Note that if your value list does not have the "Allow empty value" check set, a user won't be able to remove the last selected value anymore.
The choice group component can be used in two modes: single select (either/or, aka radio button) or multi select. That mode can be controlled via the **inputType** property.
To see a live sample of the component you can go [here](https://samples-prod.demo.servoy-cloud.eu/solution/components?a=choicegroup).
## Get Started
Choice group demo - single select
### Add a Choice Group to a form
In the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor), drag the Choice Group component from the Pallet onto the form, then select a dataprovider and a valuelist.
Create Choice Group
{% hint style="info" %}
If the component does not appear in the pallet, it means you do not have the Bootstrap Components package installed. Click "Get more components" at the top of the pallet to open the [Servoy Package Manager](https://docs.servoy.com/reference/servoy-developer/package-manager) and install it.
{% endhint %}
## Modifying a Choice Group at Design-Time
Choice Groups, like all components, have properties that can be modified at design time to set the appearance and behavior of the component. Select the component in the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) to see a list of properties in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties). Below are some common properties and how to set them at design time.
{% hint style="info" %}
See the reference docs for [Choice Group](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group) for a complete list of its [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#properties).
{% endhint %}
### Setting the data-provider
Choice Group's dataprovider can be set after the component has been added to the form or by setting it in [dataprovider](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#dataproviderid) property, found in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties).
### Setting the input type
Choice Group's input type can be set in [inputType](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#inputtype) property, found in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties). It can be single select (either/or, aka radio button) or multi select.
Choice group demo - multi select
{% hint style="danger" %}
**IMPORTANT!**\
When the Choice Group [inputType](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#inputtype) property is set to `checkbox`, then [dataprovider](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#dataproviderid) property must be a variable that can contain multiples values, such as form or scope variable.\
Example:
```javascript
/**
* @type {String}
*
* @properties={typeid:35,uuid:"FA8EF7B3-5A1C-43E6-A5A3-36E99197E38F"}
*/
var choice;
```
`dataprovider` is set as `choice`
{% endhint %}
### Setting the valuelist
Choice Group's [valuelist](https://docs.servoy.com/guides/develop/data-modeling/value-lists#overview) can be set it in [valuelist](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#valuelistid) property, found in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties) and it should match the set [dataprovider](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#dataproviderid).
Example:
In order to get a drop down menu with orders' ship countries, the followings settings should be made:
1. set the Choice Group [dataprovider](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#dataproviderid):
* if [inputType](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#inputtype) is `radio`, then [dataprovider](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#dataproviderid) can be either a table column (`shipcountry`) or another type of dataprovider
* if [inputType](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#inputtype) is `checkbox`, then [dataprovider](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#dataproviderid) must be a variable that can contain multiples values, such as form or scope variable
2. in case it doesn't exist, create a [valuelist](https://docs.servoy.com/guides/develop/data-modeling/value-lists#overview) using Table values and `shipcountry` column as dataprovider
3. set the countries list in [valuelist](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#valuelistid) property of the Choice Group
## Handling Click Events
Like most components, Choice Groups have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a Choice Group is the `onDataChange` event, which is triggered when the component is clicked and the value is changed.
To Handle the event, double-click the value for the [onDataChange](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#ondatachangemethodid) property in the [Properties Editor](https://github.com/Servoy/gitbook/blob/master/reference/servoy-developer/views/component-properties-editor.md). You will see the [Method Selection Wizard](https://docs.servoy.com/reference/servoy-developer/object-editors/method-selection-wizard). You'll have the option to select an existing Method or create a new Method. The method will be called when the Choice Group's `onDataChange` event is fired and the [Event](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent) object will be passed to it.
Create method to handle the onDataChange event
```javascript
/**
*
* @param oldValue
* @param newValue
* @param {JSEvent} event
*
* @return {Boolean}
*
* @private
*
* @properties={typeid:24,uuid:"D2499C52-AC5E-4C9E-9B51-1415F0E83D04"}
*/
function onDataChange(oldValue, newValue, event) {
//show and hide another page element according to the selected value(s)
if(newValue.includes('USA')){
elements.info_usa.visible = true;
}else {elements.info_usa.visible = false;}
return true;
}
```
{% hint style="info" %}
See the [Choice Group reference](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group) for a comprehensive list of [all events](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#events)
{% endhint %}
## Modifying a Choice Group at Runtime
Choice Groups, like many components, can be modified at runtime through code. Below are a few examples of controlling a Choice Group from code.
### Enabling / Disabling a Choice Group
You can easily change the `enabled` state of a Choice Group at runtime.
Example:
```javascript
function disableChoiceGroup(){
elements.myChoiceGroup.enabled = false;
}
```
### Hiding/Showing a Choice Group
You can easily change the `visible` state of a Choice Group at runtime.
Example:
```javascript
function hideChoiceGroup(){
elements.myChoiceGroup.visible = false;
}
```
## Calling Choice Group API Methods
Like most components, a Choice Group has API methods which can be called from code. Below is an example of common API calls.
### Add CSS Style Class
You can easily add a style class to a Choice Group using the [`addStyleClass`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#api) method.
Example:
```javascript
function AddStyleClassChoiceGroup(){
elements.myChoiceGroup.addStyleClass('mycssclass');
}
```
{% hint style="info" %}
See the [Choice Group reference](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group) for a complete list of programmable [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#properties) and [methods](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group#api).
{% endhint %}
## Related Articles
The following articles are recommended for additional reading
* [Choice group Reference Documentation](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/choice-group)
* [Styling and Themes](https://docs.servoy.com/guides/develop/application-design/styling-and-themes)
* [Scripting the UI](https://docs.servoy.com/guides/develop/programming-guide/scripting-the-ui)
