Docs
ServoyCloudSupportSamplesOpen SourceCommunity
  • Home
  • GUIDES
    • Platform Overview
    • Get Servoy
    • Get Started
      • Chapter 0
      • Chapter 1
      • Chapter 2
      • Chapter 3
      • Chapter 4
      • Chapter 5
    • Get Help
      • SuLA Instructions
      • SuLA Terms
    • Develop
      • Application Design
        • Forms
          • Layout Management
            • Simple Layout
            • Fully Responsive
              • Bootstrap 12-Grid
              • Flexbox
              • Custom Div
              • Collapsible Container
              • Simple Collapsible
              • Center Container
              • Inline Group Container
            • Abstract Form
          • Form Containers
            • Form Container
            • Tab Panel
            • Split Pane
            • Collapse
            • Accordion Panel
            • Form Component
            • List Form Component
          • Form Inheritance
          • Form Components
        • UI Components
          • Buttons and Text
            • Badge
            • Button
            • Data Label
            • Dropdown
            • Image
            • Label
          • Grids
            • Data Grid
            • Power Grid
            • Table
          • Input Controls
            • Calendar
            • Calendar Inline
            • Checkbox
            • Choice Group
            • Combobox
            • Group Buttons
            • Html Area
            • Input Group
            • Rating
            • Slider
            • Switch
            • Spinner
            • TextArea
            • Textbox
            • TextBoxGroup
            • Type Ahead
            • select2tokenizer
          • Media
            • Carousel
            • Embedded YouTube
            • File upload
            • Image label
            • Lightbox Gallery
            • MultiFile Upload
            • PDF JS Viewer
            • PDF Viewer
          • Mobile
            • Native Data List
            • Native Select
          • Navigation
            • Breadcrumbs
            • Navbar
            • sidenav
          • Visualization
            • DBTreeview
            • Progress Bar
            • Treeview
            • ChartJS
              • Data Labels Plugin
              • Funnel Chart
              • OutLabels Plugin
              • TreeMap
          • Specialized Components
            • Smart Document Editor
            • Servoy PDF Viewer
            • Fullcalendar Component
              • Fullcalendar
              • Fullcalendar Events
              • Migrating calendar from Smart and Web client to NG client
            • Fullcalendar Component 2
            • Canvas
            • Google Charts
            • Google Maps
            • svySignature
            • svywebcam
        • Styling and Themes
          • Default Theme Properties
          • CSS / LESS
          • Component Variants
          • Font Icons
        • Data Modeling
          • Databases
            • Tables
              • Columns
              • Calculations
              • Aggregations
              • Methods
              • Events / Triggers
              • Table security
            • Views
            • Procedures
          • Relations
          • Value Lists
          • Menus
          • In-Memory Databases
          • View Datasource
        • Modular Design
      • Programming Guide
        • Scripting the UI
          • Scripting Forms
          • Interacting with Components
          • Navigation
          • Windows, Dialogs and Popups
          • Events Manager
        • Working with Data
          • Concepts
          • Loading
          • Sorting
          • Iterating
          • Searching
            • Find mode
            • Query Builder
            • SQL String
          • Filtering
          • Editing
          • Validation
        • Automation and Scheduling
          • Batch Processor
          • Headless API
          • Scheduler API
        • Creating REST APIs
        • Consuming Webservices
        • Working with Files
          • File Plugin Basics
          • Images
          • Excel
          • PDF
          • JSON
        • Browser Utilities
          • Notifications
            • Web Notifications (Toastr)
            • Web Notifications (Native)
            • Block UI
          • Session Management
          • Keyboard Utilities
          • NG Utils
        • Sending and Receiving Email
        • Servoy Jasper Reports
          • Input Type
          • Display Mode
          • Output format
          • Jaspe Reports Viewer
        • Extensions
          • Modules
            • svyPhonegap
              • First Use Guide
              • Barcode Scanner
              • Browser
              • Camera
              • File
              • Fingerprint
              • Location
              • Network Interface
              • Phonegap
              • Printer
              • Push Notifications
            • svyAPI
              • Getting Started
            • svyLookup
              • Custom Templates
              • API Documentation
              • svyLookup v1
                • API Documentation v1.0.0
                • Base Form svyLookupTable v1.0.0
                • Base Form AbstractLookup v1.0.0
            • svyNavigation
              • API Documentation
                • API svyNavigation
                • API svyNavigationHistory
                • API svyNavigationUX
            • svyPopupFilter
              • Simple Filter Pickers
              • Custom Templates
              • API Documentation
                • API svyToolbarFilter
                • API svyPopupFilter
              • API Documentation v1
                • API svyToolbarFilter v1
                • API svyPopupFilter v1
            • svySearch
            • svySecurity
              • Overview
              • Token-based Auth and SSO (NEW!)
              • API Documentation
              • Getting Started
              • Tenant replication
              • Security Management Console
                • Classic Security Management Console
              • svySecurityUX
              • svyProperties
              • API Doc svyProperties
            • svyUtils
              • Log Manager
              • Log Manager Appenders
              • Smart Doc Editor Utils
              • Custom Dialogs
              • Excel Utils
                • Full API Reference
              • Crypto Utils
      • Security
        • Authentication
        • Permissions
          • UI Permissions
          • Data Permissions
          • Runtime Permissions
        • Audit Logging
        • OAuth
        • JWT
      • Multi-Language Support
      • Mobile Development
        • Getting Started
        • Mobile Design
        • Native Mobile Integrations
        • Building a Native Binary for the App Store
      • Native Desktop Development
        • NGDesktop UI plugin
        • NGDesktop Utils
        • NGDesktop File Plugin
    • Deploy
      • WAR Deployment
      • Docker Deployment
      • Server Configuration
        • Server Settings
        • Server Plugins
        • Database Servers
          • Locks
          • Transactions
          • Oracle
          • SQLServer
        • Client Sessions
        • Batch Processors
        • License Management
        • Monitoring
          • Server Log
          • Browser Console Log
          • Websocket Log
          • Query Performance
          • Client Performance
          • Client Event Tracing
          • Monitoring Servoy with JMX
      • NGClient deployment
      • Troubleshooting
      • Other Topics
        • Security: Cross-site Scripting
        • Running in an iFrame
    • Extend
    • Contribute
  • Reference
    • Servoy Core
      • Object Model
        • Database Server
          • Table
            • Column
            • Calculation
            • Method
            • Aggregation
          • View
          • Procedure
        • Solution
          • Form
          • Form Component
          • Relation
          • Relation Item
          • Table Node
          • Value List
          • Menu
          • Menu item
          • In-Memory Data Source
          • View Foundset Data Source
          • Variable
          • Column Info
          • Media
          • Layout Container
          • Method
        • i18n Message Key
      • Developer API
        • Globals
        • Forms
          • RuntimeForm
            • controller
            • containers
              • RuntimeContainer
            • elements
              • Component
              • RuntimeAccordionPanel
              • RuntimeBean
              • RuntimeButton
              • RuntimeCalendar
              • RuntimeCheck
              • RuntimeCombobox
              • RuntimeComponent
              • RuntimeDataButton
              • RuntimeDataLabel
              • RuntimeGroup
              • RuntimeHtmlArea
              • RuntimeImageMedia
              • RuntimeInsetList
              • RuntimeLabel
              • RuntimeListBox
              • RuntimePassword
              • RuntimePortal
              • RuntimeRadio
              • RuntimeChecks
              • RuntimeRadios
              • RuntimeRectangle
              • RuntimeRtfArea
              • RuntimeSpinner
              • RuntimeSplitPane
              • RuntimeTabPanel
              • RuntimeTextArea
              • RuntimeTextField
              • RuntimeWebComponent
        • JS Lib
          • Array
          • BigInt
          • Boolean
          • Date
          • Function
          • IterableValue
          • Iterator
          • JSON
          • Map
          • Set
          • Math
          • Namespace
          • Number
          • Object
          • Promise
          • QName
          • RegExp
          • Special Operators
          • Statements
          • String
          • XML
          • XMLList
        • Application
          • APPLICATION_TYPES
          • CLIENTDESIGN
          • DRAGNDROP
          • ELEMENT_TYPES
          • LOGGINGLEVEL
          • NGCONSTANTS
          • UICONSTANTS
          • CSSPosition
          • JSDimension
          • JSDNDEvent
          • JSEvent
          • JSLogger
          • JSLogBuilder
          • JSPoint
          • JSUpload
          • JSWindow
          • JSBounds
          • Renderable
          • UUID
        • SolutionModel
          • ALIGNMENT
          • ANCHOR
          • BEVELTYPE
          • CURSOR
          • DEFAULTS
          • FONTSTYLE
          • MEDIAOPTION
          • PAGEORIENTATION
          • PRINTSLIDING
          • SCROLLBAR
          • TITLEJUSTIFICATION
          • TITLEPOSITION
          • UNITS
          • JSBean
          • JSButton
          • JSCalculation
          • JSComponent
          • JSDataSourceNode
          • JSField
          • JSForm
          • JSLabel
          • JSMedia
          • JSMethod
          • JSPart
          • JSPortal
          • JSRelation
          • JSRelationItem
          • JSStyle
          • JSTab
          • JSTabPanel
          • JSValueList
          • JSVariable
          • JSTitle
          • JSChecks
          • JSCombobox
          • JSHeader
          • JSInsetList
          • JSList
          • JSPassword
          • JSRadios
          • JSText
          • JSTextArea
          • JSWebComponent
          • JSLayoutContainer
        • Database Manager
          • QUERY_COLUMN_TYPES
          • SQL_ACTION_TYPES
          • JSColumn
          • JSDataSet
          • JSBaseRecord
          • JSBaseSqlRecord
          • JSBaseFoundset
          • JSBaseSQLFoundset
          • JSFoundSet
          • JSFoundSetUpdater
          • JSRecord
          • JSRecordMarker
          • JSRecordMarkers
          • JSTable
          • JSTableFilter
          • MenuFoundSet
          • MenuItemRecord
          • QBAggregate
          • QBAggregates
          • QBCase
          • QBCaseWhen
          • QBColumn
          • QBColumns
          • QBCondition
          • QBFunction
          • QBFunctions
          • QBGroupBy
          • QBJoin
          • QBJoins
          • QBLogicalCondition
          • QBParameter
          • QBParameters
          • QBPart
          • QBResult
          • QBSearchedCaseExpression
          • QBSelect
          • QBSort
          • QBSorts
          • QBTableClause
          • QBWhereCondition
          • ViewFoundSet
          • ViewRecord
        • Events Manager
          • EVENTS_AGGREGATION_TYPES
          • EventType
        • Menus
          • JSMenu
          • JSMenuItem
        • JSMenuDatasource
        • Utils
        • Client Utils
          • JSBlobLoaderBuilder
        • History
        • Security
        • i18n
        • ServoyException
          • DataException
        • JSUnit
        • Datasources
          • DBDataSource
          • DBDataSourceServer
          • JSConnectionDefinition
          • JSDataSource
          • MemDataSource
          • MenuDataSource
          • SPDataSource
          • SPDataSourceServer
          • ViewDataSource
        • JSViewDatasource
        • servoyDeveloper
        • enum
    • Extensions
      • UI Components
        • Buttons and Text
          • Badge
          • Button
          • Data Label
          • Drop Down
          • Image
          • Label
        • Form Containers
          • Accordion Panel
          • Collapse
          • Form Container
          • Form Component Container
          • List Form Component
          • Default Loading Indicator
          • Error Bean
          • Portal
          • Responsive Container
          • Servoy Default Navigator
          • Slider
          • Split Pane
          • TabPanel
        • Grids
          • Data Grid
          • Power Grid
          • Table
        • Input Controls
          • Calendar
          • Calendar Inline
          • Checkbox
          • Choice Group
          • Combobox
          • Floatinglabel Calendar
          • Floatinglabel Combobox
          • Floatinglabel Textarea
          • Floatinglabel Textbox
          • Floatinglabel Type Ahead
          • Group Buttons
          • Html Area
          • Input Group
          • Rating
          • Select2tokenizer
          • Slider
          • Spinner
          • Switch
          • TextArea
          • TextBox
          • TextBox Group
          • Type Ahead
        • Media
          • Carousel
          • Embedded YouTube
          • File upload
          • Image label
          • Lightbox Gallery
          • MultiFile Upload
          • PDF JS Viewer
          • PDF Viewer
        • Mobile
          • Native Data List
          • Native Select
        • Navigation
          • Breadcrumbs
          • Navbar
          • sidenav
        • SmartDocEditor
          • Smart Document Editor
        • Visualization
          • Canvas
          • Chart
          • Custom List
          • DBTreeview
          • Foundset List
          • Fullcalendar
          • Gauge
          • Google Maps
          • Kanban
          • Progress Bar
          • Treeview
      • Server Plugins
        • amortization
          • AmortizationCalculation
          • Polynomial
        • clientmanager
          • Broadcaster
          • JSClientInformation (cm)
        • excelxport
        • file
          • JSFile
          • JSProgressMonitor
        • headlessclient
          • JSClient
        • http
          • HTTP_STATUS
          • Cookie
          • DeleteRequest
          • GetRequest
          • HeadRequest
          • HttpClient
          • HttpClientConfig
          • OptionsRequest
          • PostRequest
          • PutRequest
          • Response
          • TraceRequest
          • PatchRequest
          • JSFileUpload
        • images
          • JSImage
        • jwt
          • Algorithm
          • Builder
          • JWTClaims
        • mail
          • Attachment
          • MailMessage
        • maintenance
          • JSClientInformation
          • JSColumnObject
          • JSServer
          • JSTableObject
        • mobileservice
          • OfflineDataDescription
        • oauth
          • ClientAuthentication
          • CustomApiBuilder
          • OAuthProviders
          • OAuthRequest
          • OAuthResponse
          • OAuthResponseBinary
          • OAuthResponseJSON
          • OAuthResponseText
          • OAuthService
          • OAuthServiceBuilder
          • OAuthTokenExtractors
          • RequestType
        • pdf_output
        • rawSQL
        • RestWs plugin
        • rest_ws
          • WsContents
          • WsCookie
          • WsRequest
          • WsResponse
        • scheduler
        • serialize
        • textxport
          • DataProviderExport
          • TabExporter
        • udp
          • JSPacket
        • XmlReader
          • XmlNode
      • Browser Plugins
        • Block UI
        • Block UI (ref)
        • Dialogs Plugin
        • Idle
        • Idle (ref)
        • Key Listener
        • Key Listener (ref)
        • NGDesktop File
        • NGDesktop File (ref)
        • NGDesktop UI (ref)
        • NGDesktop Utils (ref)
        • NG Utils (ref)
        • Office Javascript API for Servoy
        • Phonegap
        • Web Notifications (Native)
        • Web Notifications (Toastr)
        • Window Plugin
        • Font Awesome
      • Modules
        • Smart Doc Editor Utils
        • svyAPI
          • Getting Started
        • svyLookup
          • Custom Templates
          • API Documentation
          • svyLookup v1
            • API Documentation v1.0.0
            • Base Form svyLookupTable v1.0.0
            • Base Form AbstractLookup v1.0.0
        • svyLookupExample
        • svyNavigation
          • API Documentation
            • API svyNavigation
            • API svyNavigationHistory
            • API svyNavigationUX
        • svyNavigationUX
        • svyNavigationUXSample
        • svyPopupFilter
          • Simple Filter Pickers
          • Custom Templates
          • API Documentation
            • API svyToolbarFilter
            • API svyPopupFilter
          • API Documentation v1
            • API svyToolbarFilter v1
            • API svyPopupFilter v1
        • svyProperties
        • svySearch
        • svySecurity
          • Overview
          • Token-based Auth and SSO (NEW!)
          • API Documentation
          • Getting Started
          • Tenant replication
          • Security Management Console
            • Classic Security Management Console
          • svySecurityUX
          • svyProperties
          • API Doc svyProperties
        • svySecurityConsole
        • svySecurityUX
        • svyUtils
          • Log Manager
          • Log Manager Appenders
          • Smart Doc Editor Utils
          • Custom Dialogs
          • Excel Utils
          • Full API Reference
          • Crypto Utils
        • svyUtils$Excel
        • svyUtils$NGClient
        • svyUtils$customDialogs
        • svyUtils$logManagerAppenders
        • svyUtils$tableGrid
      • Layout
        • Boostrap 12grid layout
          • Collapsible Container
          • Simple Collapsible
          • Center Container
          • Inline Group Container
          • Flexbox Layout
      • Solutions
        • Sample Application
          • Tutorial Part 1
          • Tutorial Part 2
      • Packages
        • UI Component Packages
          • Advanced Renderers
          • Bootstrap Components
          • Bootstrap Extra Components
          • Canvas
          • Chart JS
          • Fullcalendar Component
          • googlemaps
          • kanban
          • Servoy Core
          • Servoy Extra Components
          • Servoy NG-Grids
          • Servoy PDF Viewer
          • smartDocumentEditor
        • Browser Plugin Packages
          • Block UI
          • Core NG only Services
          • Key Listener
          • NGDesktop File
          • NGDesktop UI
          • NGDesktop Utils
          • Web Notifications
          • Idle Web Service
    • Servoy Developer
      • Menu
        • File
        • Edit
        • Source
        • Refactor
        • Navigate
        • Search
        • Project
        • Actions
        • Run
        • Window
        • Help
      • Toolbar
      • Solution Explorer
        • Resources
          • Database Servers
            • Database Server
              • Procedures
              • Tables
              • Views
          • Security
          • i18n
        • All Solutions
          • Solution
          • Active Solution
            • Scopes
              • Scope
                • Variables
            • Forms
              • Working Set
              • Form
                • Controller
                • Variables
                • Elements
                • Relations
            • Form Components
              • Form Component
            • Relations
              • Relation
            • ValueLists
              • ValueList
            • Menus
              • Menu
                • MenuItem
            • Media
              • Folder
              • File
            • DataSources
              • In Memory DataSources
                • In Memory DataSource
              • View Foundsets DataSources
                • View Foundset DataSources
            • Servoy Packages
              • Package
            • Modules
              • Module
        • Solution Explorer Contextual List
      • Views
        • Command Console
        • Console
        • Problems
        • Tasks
        • Bookmarks
        • Search
        • Form Hierarchy
        • Help
        • JUnit
        • Outline
        • Profiler
        • Properties
        • Project Explorer
        • Call Hierarchy
      • Editors and Wizards
        • Property configurator for columns
        • Relation Editor
        • Text Format Editor
        • Date Format Editor
        • Number Format Editor
        • Database Synchronization Wizard
        • Security Editor
        • SQL Editor
        • i18n Editor
        • File Import Wizard
        • File Export Wizard
        • WAR Export Wizard
        • NGDesktop Export Wizard
        • Table Editor
        • Metadata Synchronization Wizard
        • Database Server Connection Editor
        • Text Property Editor
        • Valuelist Editor
        • Form Editor
          • Parts of the Form Editor
          • Designing a Form
          • Layout Tools
          • Using Containers
          • Creating and Using Forms
          • Using Servoy Beans
          • Using Shapes
          • Form Editor Subtabs
          • [Tips and Shortcuts][reference/servoy-developer/object-editors/form-editor-tips_and_shortcuts.md]
          • Editong a Responsive LayoutForm
          • CSS Positioning
        • Form Hierarchy
        • Component Properties Editor
        • Variable Editor
        • Method Selection Wizard
        • New Solution Wizard
        • Application Event Types Editor
        • New Form Wizard
        • Form Dataproviders Configurator
        • Servoy Resource Locator
        • Datasource Selection Wizard
        • Sorting Fields Wizard
        • Scripting Editor
          • Getting Started-Overview of Script Editor
          • Code Writing Features
          • Code Navigation
          • Code Rewriting Tools
          • Refactoring
          • Code Formatting
          • Script Editor Tips and Shortcuts
          • Unit Tests
        • Theme Editor
          • General Properties
          • Sidenav Properties
          • Navbar Properties
          • Tabs Properties
          • Windows Properties
          • Dialogs Properties
          • Tables Properties
          • Breadcrumb specific style Properties
          • Brand colors Properties
          • Validations Properties
          • Margins and Padding Properties
        • Editor Selection
        • Run Configurations
        • Debug Configurations
        • Externalize Strings Wizard
        • Font Chooser Wizard
        • Color Chooser Wizard
        • Project Properties Configurator
        • Move Wizard
        • External Tools Configurations
        • About Servoy Developer
        • Servoy Developer Installation Details
        • Eclipse Marketplace Wizard
        • Install Available Software Wizard
        • Cheat Sheet Selection Wizard
        • Servoy Developer Help Wizard
        • Switch to Editor Wizard
        • Find Actions Wizard
        • Customize Perspective Configurator
        • Quick Search Wizard
        • Search Wizard
        • Encoding Wizard
        • Task Wizard
        • Find - Replace Wizard
        • Properties Editor
        • New Project Wizard
        • New Method Wizard
        • New Menu Wizard
          • New MenuItem Wizard
        • Menu Editor
        • ServoyMenu Selection Wizard
        • JSMenu compatible component selector
        • Permissions Configuration Dialog
      • Project File Structure
        • Servoy Installation Directory
          • servoy.properties
        • Workspace Folder
          • Resources Directory
            • Database Information (.dbi) Files
          • Solution Folder
      • Package Manager
      • Preferences
      • Property Types for components / services
      • Debugger
        • Debug Explorer
        • Breakpoints
          • Breakpoint Properties
        • Variables
        • Expressions
        • Interactive Console
    • Application Server
    • Servoy Cloud
      • Cloud Control Center
        • Home
          • Setup Namespace
          • User profile
            • My Profile
            • Support
        • Download IDE
        • Application Overview
          • Applications
            • Pipelines
              • Jobs
                • Packages
                  • Commits
                  • Artifacts
                  • Configuration
                  • Quality reports
                  • Build markers
                • Job Configuration
                  • Build and Deploy or Build
                  • Mobile
                  • Desktop
            • Environments
              • Metrics
                • Users
                • Databases
                  • Metrics
                • System Health
                • Log Activity
                • App performance
                • Query performance
              • Cloud reporting
            • Security
              • Permissions
              • Tenants
            • Reports
            • Security Login Designer
              • Single Sign-On
                • Sign in with Google
                • Sign in with Microsoft
          • Code Repositories
        • Project Management
          • Tickets
          • Backlog
          • Active Sprints
        • User Management
          • Users
          • Roles
        • Administration
          • Security
            • ServoyCloud Roles
          • Credentials
          • Settings
        • Add-Ons
      • Database Backup
      • E2E Cypress Testing
        • Using Cypress
      • On-Premise Deployment
      • Privacy policy (ServoyAI)
      • FAQ
      • Migrate to Servoy Cloud
    • Extensions Developement
      • Component and Services
        • Component Development
        • Service Development
        • Tools and Dev Tips to use for Component/Service developement
        • Manifest (.mf file)
        • Specification (.spec file)
          • Property Types
            • Array property types
            • Custom object property types
            • Findmode property type
            • Foundset property type
            • Tags
        • Directives And Filters
          • Sablotabsequence
        • Console (serverside)
        • ServoyApi (serverside)
      • Serverside Plugins
        • Data Convertors and Validators
        • UI Convertors
  • Release notes
    • Release notes
      • 2025.03
      • 2024.03 (LTS)
      • 2023.03 (LTS)
      • 2025.03 (Servoy Cloud)
      • 2024.12
      • 2024.12 (Servoy Cloud)
      • 2024.09
      • 2024.09 (Servoy Cloud)
      • 2024.06
      • 2024.06 (Servoy Cloud)
      • 2024.03 (Servoy Cloud)
      • 2023.12
      • 2023.12 (Servoy Cloud)
      • 2023.09
      • 2023.09 (Servoy Cloud)
      • 2023.06
      • 2022.03 (LTS)
      • 2022.12 What's new
      • 2022.12
      • 2022.09 What's new
      • 2022.09
      • 2022.06 What's new
      • 2022.06
      • 2021.03.3 (LTS)
Powered by GitBook
On this page
  • Overview
  • Get Started
  • Add a Choice Group to a form
  • Modifying a Choice Group at Design-Time
  • Setting the data-provider
  • Setting the input type
  • Setting the valuelist
  • Handling Click Events
  • Modifying a Choice Group at Runtime
  • Enabling / Disabling a Choice Group
  • Hiding/Showing a Choice Group
  • Calling Choice Group API Methods
  • Add CSS Style Class
  • Related Articles

Was this helpful?

  1. GUIDES
  2. Develop
  3. Application Design
  4. UI Components
  5. Input Controls

Choice Group

PreviousCheckboxNextCombobox

Last updated 3 months ago

Was this helpful?

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.

Get Started

Add a Choice Group to a form

Modifying a Choice Group at Design-Time

Setting the data-provider

Setting the input type

/**
 * @type {String}
 *
 * @properties={typeid:35,uuid:"FA8EF7B3-5A1C-43E6-A5A3-36E99197E38F"}
 */
var choice;

dataprovider is set as choice

Setting the valuelist

Example:

In order to get a drop down menu with orders' ship countries, the followings settings should be made:

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.

/**
 *
 * @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;
}

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:

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:

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

Example:

function AddStyleClassChoiceGroup(){
	elements.myChoiceGroup.addStyleClass('mycssclass');
}

Related Articles

The following articles are recommended for additional reading

To see a live sample of the component you can go .

In the , drag the Choice Group component from the Pallet onto the form, then select a dataprovider and a valuelist.

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 and install it.

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 to see a list of properties in the . Below are some common properties and how to set them at design time.

See the reference docs for for a complete list of its .

Choice Group's dataprovider can be set after the component has been added to the form or by setting it in property, found in the .

Choice Group's input type can be set in property, found in the . It can be single select (either/or, aka radio button) or multi select.

IMPORTANT! When the Choice Group property is set to checkbox, then property must be a variable that can contain multiples values, such as form or scope variable. Example:

Choice Group's can be set it in property, found in the and it should match the set .

set the Choice Group :

if is radio, then can be either a table column (shipcountry) or another type of dataprovider

if is checkbox, then must be a variable that can contain multiples values, such as form or scope variable

in case it doesn't exist, create a using Table values and shipcountry column as dataprovider

set the countries list in property of the Choice Group

To Handle the event, double-click the value for the property in the . You will see the . 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 object will be passed to it.

See the for a comprehensive list of

You can easily add a style class to a Choice Group using the method.

See the for a complete list of programmable and .

here
Form Editor
Servoy Package Manager
Choice group Reference Documentation
Styling and Themes
Scripting the UI
Form Editor
Choice Group
Properties Editor
Method Selection Wizard
Event
Choice Group reference
Choice Group reference
properties
inputType
dataprovider
dataprovider
inputType
dataprovider
inputType
dataprovider
valuelist
onDataChange
all events
addStyleClass
properties
methods
dataprovider
inputType
valuelist
dataprovider
valuelist
Component Properties Editor
Component Properties Editor
Component Properties Editor
valuelist
Component Properties Editor
Choice group
Choice group demo - single select
Create Choice Group
Choice group demo - multi select
Create method to handle the onDataChange event