Import
import { InputCheckboxModule } from '@backbase/ui-ang/input-checkbox'
Usage
Use the bb-input-checkbox-ui component to render a checkbox input.
<!-- Basic input checkbox usage -->
<bb-input-checkbox-ui
[(ngModel)]="checked"
label="Accept terms">
</bb-input-checkbox-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
autofocus |
boolean |
false |
|
disabled |
boolean |
false |
|
hideCheckbox |
boolean |
false |
|
id |
string |
A unique string |
|
indeterminate |
boolean |
false |
|
inputClassName |
string |
undefined |
|
label |
string |
'' |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
size |
number | string |
20 |
|
value |
boolean |
'' |
autofocus
The autofocus input determines whether the checkbox should be automatically focused when the component is initialized. Defaults to false.
<!-- Input checkbox with autofocus -->
<bb-input-checkbox-ui
[autofocus]="true"
label="Accept terms">
</bb-input-checkbox-ui>
disabled
The disabled input disables the checkbox when set to true. Defaults to false.
<!-- Disabled input checkbox -->
<bb-input-checkbox-ui
[disabled]="true"
label="Accept terms">
</bb-input-checkbox-ui>
hideCheckbox
The hideCheckbox input hides the visual checkbox but keeps the label and content. Useful for accessibility scenarios. Defaults to false.
<!-- Input checkbox with hidden checkbox -->
<bb-input-checkbox-ui
[hideCheckbox]="true"
label="Accept terms">
</bb-input-checkbox-ui>
id
The id input sets the unique identifier for the checkbox input. Used to associate the label with the input. Defaults to a unique string.
<!-- Input checkbox with custom id -->
<bb-input-checkbox-ui
id="accept-terms"
label="Accept terms">
</bb-input-checkbox-ui>
indeterminate
The indeterminate input sets the checkbox to an indeterminate state, visually indicating a mixed or partial selection. Defaults to false.
<!-- Input checkbox in indeterminate state -->
<bb-input-checkbox-ui
[indeterminate]="true"
label="Accept terms">
</bb-input-checkbox-ui>
inputClassName
The inputClassName input adds custom CSS classes to the checkbox input element.
<!-- Input checkbox with custom class -->
<bb-input-checkbox-ui
inputClassName="my-checkbox"
label="Accept terms">
</bb-input-checkbox-ui>
label
The label input sets the text label for the checkbox. Defaults to an empty string.
<!-- Input checkbox with label -->
<bb-input-checkbox-ui label="Accept terms"></bb-input-checkbox-ui>
readonly
The readonly input makes the checkbox read-only when set to true. Defaults to false.
<!-- Read-only input checkbox -->
<bb-input-checkbox-ui
[readonly]="true"
label="Accept terms">
</bb-input-checkbox-ui>
required
The required input marks the checkbox as required for form validation. Defaults to false.
<!-- Required input checkbox -->
<bb-input-checkbox-ui
[required]="true"
label="Accept terms">
</bb-input-checkbox-ui>
size
The size input sets the minimum width for the checkbox input. Defaults to 20.
<!-- Input checkbox with custom size -->
<bb-input-checkbox-ui
[size]="30"
label="Accept terms">
</bb-input-checkbox-ui>
value
The value input sets the checked state of the checkbox. Defaults to ''.
<!-- Input checkbox with value binding -->
<bb-input-checkbox-ui
[(ngModel)]="checked"
label="Accept terms">
</bb-input-checkbox-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent> |
Emitted when the checkbox loses focus |
|
focus |
EventEmitter<FocusEvent> |
Emitted when the checkbox gains focus |
|
indeterminateChange |
EventEmitter<boolean> |
Emitted when the indeterminate state changes |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviours 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 |
|---|---|---|
|
ariaActivedescendant |
Identifies the currently active element when focus is on a composite widget |
string |
|
ariaControls |
Indicates which element(s) the widget controls |
string |
|
ariaDescribedby |
References the element that describes this widget |
string |
|
ariaExpanded |
Indicates if the control is expanded or collapsed |
string |
|
ariaInvalid |
Indicates the entered value is not in the expected format |
string |
|
ariaLabel |
Sets an accessible label when the label tag is not rendered |
string |
|
ariaLabelledby |
References elements that provide an accessible name |
string |
|
ariaOwns |
Identifies elements as part of a parent-child relationship |
string |
|
role |
Sets the ARIA role for the checkbox input. Defaults to undefined |
string |