Import
import { CheckboxGroupModule } from '@backbase/ui-ang/checkbox-group'
Usage
Use the bb-checkbox-group-ui component to manage a group of checkboxes with a parent control. This component can only be used as a child of NgForm (within <form> tags).
<form #checkboxGroupForm="ngForm">
<bb-checkbox-group-ui ngModelGroup="list" label="Checkbox Group Parent">
</bb-checkbox-group-ui>
<ul ngModelGroup="list" class="list-unstyled bb-checkbox-group">
<li>
<bb-input-checkbox-ui name="i1" ngModel label="Child 1" class="bb-block bb-block--sm">
</bb-input-checkbox-ui>
</li>
<li>
<bb-input-checkbox-ui name="i2" ngModel label="Child 2" class="bb-block bb-block--sm">
</bb-input-checkbox-ui>
</li>
</ul>
</form>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
disabled |
boolean |
false |
|
id |
string |
A unique string |
|
label |
string |
'' |
|
required |
boolean |
false |
disabled
The disabled state of Checkbox Group is defined based on attached checkbox inputs. If every checkbox input is disabled then parent checkbox added by Checkbox Group is disabled as well.
<form #checkboxGroupForm="ngForm">
<bb-checkbox-group-ui ngModelGroup="list">
</bb-checkbox-group-ui>
<ul ngModelGroup="list" class="list-unstyled bb-checkbox-group">
<li>
<bb-input-checkbox-ui name="i1" ngModel disabled label="Child" class="bb-block bb-block--sm">
</bb-input-checkbox-ui>
</li>
<li>
<bb-input-checkbox-ui name="i2" ngModel disabled label="Child" class="bb-block bb-block--sm">
</bb-input-checkbox-ui>
</li>
</ul>
</form>
id
The id input sets a unique identifier for the checkbox group. If not provided, a unique string is generated automatically.
<!-- Checkbox group with custom id -->
<bb-checkbox-group-ui [id]="'my-checkbox-group'"></bb-checkbox-group-ui>
label
The label input sets the label for the checkbox group. Defaults to an empty string.
<!-- Checkbox group with label -->
<bb-checkbox-group-ui [label]="'Select all'"></bb-checkbox-group-ui>
required
The required input marks the checkbox group as required for form validation. Defaults to false.
<!-- Required checkbox group -->
<bb-checkbox-group-ui [required]="true"></bb-checkbox-group-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent> |
Emitted when the checkbox group loses focus |
|
focus |
EventEmitter<FocusEvent> |
Emitted when the checkbox group receives focus |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaLabel |
Sets an accessible label when no label tag is rendered |
string |