---
title: Individual Checkbox Comments
product: Form Library
description: Learn how to allow users to leave comments on individual checkbox options in a SurveyJS form. When respondents select a specific checkbox, a comment field appears next to it so they can provide additional context or feedback for that particular choice.
framework: Angular
source: https://surveyjs.io/form-library/examples/individual-checkbox-comments/angular
index: https://surveyjs.io/form-library/examples/overview.md
---
# Individual Checkbox Comments (Angular)
Any SurveyJS question can include a comment area that allows users to explain or elaborate on their answer. For select-based questions—such as Dropdown, Radio Button Group, and Checkboxes—you can also enable comment areas for individual choice options. This example demonstrates how to configure and use this feature.
## Individual Choice Comments Configuration
To enable a comment area for a specific choice option, set its `showCommentArea` property to `true`. You can also set the `isCommentRequired` property to make the comment mandatory when that option is selected.
To guide users on what to enter in the comment area, use the [`commentPlaceholder`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#commentPlaceholder) property. You can set this property within a choice item configuration object to apply the placeholder only to that item or set it on the question level to apply the same placeholder to all comment areas.
## Data Format
When individual choice comments are enabled, the question's value format changes as follows:
- For single-choice questions (e.g., Dropdown or Radio Button Group), the value changes from a primitive to an object.
- For multiple-choice questions (e.g., Checkboxes), the value changes from an array of values to an array of objects.
Each object contains the following properties:
- `value`\
A selected choice value. You can rename this property using the question's [`valuePropertyName`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#valuePropertyName) setting.
- `comment`\
A comment provided for that choice.
**Example:**
When individual choice comments are disabled:
```js
{
"car": [
"Ford",
"Volkswagen"
]
}
```
When individual choice comments are enabled:
```js
{
"car": [
{
"value": "Ford",
"comment": "Comment for Ford"
},
{
"value": "Volkswagen",
"comment": "Comment for Volkswagen"
}
]
}
```
## "Other" Choice Item Configuration
The "Other" item lets users provide a custom answer not listed in the choices. To enable it, set the question's [`showOtherItem`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#showOtherItem) property to true.
The "Other" comment area inherits the question-level [`commentPlaceholder`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#commentPlaceholder) value, if set. You can override it using the [`otherPlaceholder`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#otherPlaceholder) property.
Checkbox questions also support other special choice options, such as "None", "Select All", "Don't Know", and "Refuse to Answer". For more details, refer to the Documentation section in the Checkboxes Question demo:
[View Checkboxes Question Demo](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/ (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": [
{
"value": "Ford",
"showCommentArea": true
// "isCommentRequired": true,
// "commentPlaceholder": "Placeholder for this particular choice option"
},
{ "value": "Vauxhall", "showCommentArea": true },
{ "value": "Volkswagen", "showCommentArea": true },
{ "value": "Nissan", "showCommentArea": true },
{ "value": "Audi", "showCommentArea": true },
{ "value": "Mercedes-Benz", "showCommentArea": true },
{ "value": "BMW", "showCommentArea": true },
{ "value": "Peugeot", "showCommentArea": true },
{ "value": "Toyota", "showCommentArea": true },
{ "value": "Citroen", "showCommentArea": true }
],
"showOtherItem": true,
"otherPlaceholder": "Please specify the car's make and model and share your impressions.",
"commentPlaceholder": "Please specify the car's model and share your impressions.",
"showNoneItem": 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.data = {
"car": [
{
"value": "Ford",
"comment": "I currently drive a Ford Focus, and it's been a great everyday car. It's reliable, efficient, and comfortable on long drives."
},
{
"value": "Volkswagen",
"comment": "I own a Volkswagen Golf, and I love how solid and well-built it feels. The interior is surprisingly refined, and it's fun to drive."
}
]
};
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/individual-checkbox-comments/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/individual-checkbox-comments/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/individual-checkbox-comments/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/individual-checkbox-comments/vanillajs.md)