--- title: Checkboxes Question product: Form Library description: The checkboxes question is a simple close-ended question that lets your respondents choose several answers from a list of options. Create a checkboxes question and add it to your JavaScript app with SurveyJS. framework: Angular source: https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/angular index: https://surveyjs.io/form-library/examples/overview.md --- # Checkboxes Question (Angular) A Checkboxes question displays a set of clickable checkboxes. Respondents can select one or multiple checkboxes to give their answer. This demo shows how to create and configure a Checkboxes question in SurveyJS Form Library. Switch between Angular, Vue, jQuery, React, and Vanilla JS to view an example for your JavaScript framework/library. ## Create a Checkboxes Question To create a Checkboxes question, define an object with the `type` property set to `"checkbox"` and add it to the [`elements`](https://surveyjs.io/form-library/documentation/api-reference/pagemodel#elements) array. Use the [`choices`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#choices) array to specify choice values. Each object in this array should have the following structure: ```js { "value": any, // A unique value to be saved in the survey results. "text": string // A display text. When `text` is undefined, `value` is used as display text. } ``` If you need to specify only the `value` property, you can set the `choices` property to an array of primitive values as shown in this demo. These values are both saved in survey results and used as display text. You can also load choice values from a RESTful service. In this case, use the [`choicesByUrl`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#choicesByUrl) property instead of the `choices` array. Refer to the [ChoicesRestful](https://surveyjs.io/form-library/documentation/api-reference/choicesrestful) object for information on how to configure this property. The demo on this page defines local `choices`. ## Display Special Choices A Checkboxes question supports the following special choice items: | Special choice item | Description | Display the item | Change caption | | -------------- | ----------- | -------------- | --------------------- | | Select All | Allows respondents to select or unselect all checkboxes with one click. | [`showSelectAllItem`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#showSelectAllItem) | [`selectAllText`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#selectAllText) | | None | Indicates that none of the listed options apply. | [`showNoneItem`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#showNoneItem) | [`noneText`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#noneText) | | Refuse to answer | Indicates that the respondent prefers not to answer the question. | [`showRefuseItem`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#showRefuseItem) | [`refuseText`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#refuseText) | | Don't know | Indicates that the respondent is unsure how to answer. | [`showDontKnowItem`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#showDontKnowItem) | [`dontKnowText`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#dontKnowText) | | Other | Allows respondents to enter their own option into a comment area. | [`showOtherItem`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#showOtherItem) | [`otherText`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#otherText) | When respondents select "Other", the value they enter into the comment area is saved in a separate property. The property name is composed of the question [`name`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#name) and [`commentSuffix`](https://surveyjs.io/form-library/documentation/api-reference/surveymodel#commentSuffix). For example, if the question name is `"car"`, the survey result will be as follows: ```js { "car": "other", "car-Comment": "Custom value" } ``` If you want to use the question name as a key to store the comment value, disable the [`storeOthersAsComment`](https://surveyjs.io/form-library/documentation/api-reference/surveymodel#storeOthersAsComment) property in `SurveyModel`. In this case, you will get the following survey result: ```js { "car": "Custom value" } ``` ## Arrange and Sort Checkboxes You can arrange checkboxes in multiple columns. Assign the desired number of columns to the [`colCount`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#colCount) property. In this demo, you can select between 0, 1, 2, and 3 columns. When `colCount` is 0, checkboxes are arranged in a single line and wrapped to the next line if they do not fit. Choices are sorted according to the `choices` array. If you want to sort them in ascending or descending alphabetical order, assign `"asc"` or `"desc"` to the [`choicesOrder`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#choicesOrder) property. Alternatively, you can set this property to `"random"`. In this case, choices are sorted in random order each time your survey is displayed. You can change the sort order at runtime in this demo. Special choices ("Select All", "None", and "Other") can be displayed on individual rows. Enable the [`separateSpecialChoices`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#separateSpecialChoices) property for this layout. ## Limit the Number of Selected Choices If you want to specify a maximum number of choices that respondents can select, assign this number to the [`maxSelectedChoices`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#maxSelectedChoices) property. Note that the Select All functionality becomes unavailable. In this demo, you can change the `maxSelectedChoices` value at runtime. ## See Also [Conditionally Display Choice Options](/form-library/examples/how-to-conditionally-display-choice-options/ (linkStyle)) ## Files ### `src/app/components/json.ts` ```ts export const json = { "elements": [{ "type": "checkbox", "name": "car", "title": "Which is the brand of your car?", "description": "If you own cars from multiple brands, please select all of them.", "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ], "isRequired": true, "colCount": 2, "showNoneItem": true, "showOtherItem": true, "showSelectAllItem": true, "separateSpecialChoices": true }] }; ``` ### `src/app/components/survey.component.css` ```css /* You can add your custom CSS here. */ ``` ### `src/app/components/survey.component.html` ```html ``` ### `src/app/components/survey.component.ts` ```ts import { Component, OnInit } from "@angular/core"; import { Model } from "survey-core"; import { json } from "./json"; import "./survey.component.css"; import "survey-core/survey-core.min.css"; @Component({ // tslint:disable-next-line:component-selector selector: "component-survey", templateUrl: "./survey.component.html", styleUrls: ["./survey.component.css"] }) export class SurveyComponent implements OnInit { model: Model; ngOnInit() { const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); this.model = survey; } } ``` ### `src/app/components/theme.ts` ```ts export const themeJson = {}; ``` ### `src/app/app.component.css` ```css ``` ### `src/app/app.component.html` ```html ``` ### `src/app/app.component.ts` ```ts import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title = "CodeSandbox"; } ``` ### `src/app/app.module.ts` ```ts import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { SurveyModule } from "survey-angular-ui"; import { SurveyComponent } from "./components/survey.component"; @NgModule({ declarations: [AppComponent, SurveyComponent], imports: [BrowserModule, SurveyModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` ### `src/environments/environment.prod.ts` ```ts export const environment = { production: true }; ``` ### `src/environments/environment.ts` ```ts // The file contents for the current environment will overwrite these during build. // The build system defaults to the dev environment which uses `environment.ts`, but if you do // `ng build --env=prod` then `environment.prod.ts` will be used instead. // The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { production: false }; ``` ### `src/index.html` ```html ``` ### `src/main.ts` ```ts import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { AppModule } from "./app/app.module"; import { environment } from "./environments/environment"; if (environment.production) { enableProdMode(); } platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => console.log(err)); ``` ### `src/polyfills.ts` ```ts /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html */ /*************************************************************************************************** * BROWSER POLYFILLS */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import 'core-js/es6/symbol'; // import 'core-js/es6/object'; // import 'core-js/es6/function'; // import 'core-js/es6/parse-int'; // import 'core-js/es6/parse-float'; // import 'core-js/es6/number'; // import 'core-js/es6/math'; // import 'core-js/es6/string'; // import 'core-js/es6/date'; // import 'core-js/es6/array'; // import 'core-js/es6/regexp'; // import 'core-js/es6/map'; // import 'core-js/es6/weak-map'; // import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ // import 'classlist.js'; // Run `npm install classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ // import 'core-js/es6/reflect'; /** Evergreen browsers require these. **/ // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. import "core-js/proposals/reflect-metadata"; /** * Required to support Web Animations `@angular/platform-browser/animations`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation **/ // import 'web-animations-js'; // Run `npm install web-animations-js`. /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ import "zone.js/dist/zone"; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ ``` ### `src/styles.css` ```css /* You can add your custom CSS here. */ ``` ### `src/typings.d.ts` ```ts /* SystemJS module definition */ declare var module: NodeModule; interface NodeModule { id: string; } ``` ### `.angular-cli.json` ```json { "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "prefix": "app", "styles": [ "styles.css" ], "scripts": [ ], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ] } ``` ### `_tsconfig.json` ```json { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "allowSyntheticDefaultImports": true, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "resolveJsonModule": true, "target": "es2015", "module": "es2020", "lib": [ "es2018", "dom" ] } } ``` ### `package.json` ```json { "name": "surveyjs-angular", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "14.1.1", "@angular/cdk": "14.1.1", "@angular/common": "14.1.1", "@angular/compiler": "14.1.1", "@angular/core": "14.1.1", "@angular/forms": "14.1.1", "@angular/platform-browser": "14.1.1", "@angular/platform-browser-dynamic": "14.1.1", "@angular/router": "14.1.1", "core-js": "3.6.4", "rxjs": "6.5.4", "survey-core": "latest", "survey-angular-ui": "latest", "tslib": "1.13.0", "zone.js": "0.11.7" }, "devDependencies": { "@angular/cli": "1.6.6", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/core-js": "0.9.46", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "3.9.7" }, "keywords": [ "angular", "surveyjs" ], "description": "SurveyJS-Angular example project" } ``` ## Other Frameworks - [React](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/reactjs.md) - [Vue 3](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/vanillajs.md)