Import
import { SwitchModule } from '@backbase/ui-ang/switch'
Usage
Use the bb-switch-ui component to display a switch toggle control.
<!-- Basic switch usage -->
<bb-switch-ui [label]="'Label'"></bb-switch-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
autofocus |
boolean |
false |
|
disabled |
boolean |
false |
|
id |
string |
A unique string |
|
inputClassName |
string |
undefined |
|
label |
string |
'' |
|
labelPosition |
'left' | ‘right' |
'left' |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
size |
number | string |
20 |
autofocus
The autofocus input determines whether the switch should automatically receive focus when the page loads.
<!-- Switch with autofocus enabled -->
<bb-switch-ui
[autofocus]="true"
[label]="'Auto-focus switch'">
</bb-switch-ui>
disabled
The disabled input disables the switch, preventing user interaction.
<!-- Disabled switch -->
<bb-switch-ui
[disabled]="true"
[label]="'Label'">
</bb-switch-ui>
id
The id input sets a unique identifier for the switch. If not provided, a unique string is generated automatically.
<!-- Switch with custom id -->
<bb-switch-ui
[id]="'my-switch'"
[label]="'Custom ID switch'">
</bb-switch-ui>
inputClassName
The inputClassName input allows you to add custom CSS classes to the underlying input element.
<!-- Switch with custom input class -->
<bb-switch-ui
[inputClassName]="'my-custom-class'"
[label]="'Custom class switch'">
</bb-switch-ui>
label
The label input sets the label text for the switch.
<!-- Switch with label -->
<bb-switch-ui [label]="'Enable notifications'"></bb-switch-ui>
labelPosition
The labelPosition input specifies the position of the label relative to the switch control.
<!-- Switch with label on the right -->
<bb-switch-ui
[label]="'Right label'"
[labelPosition]="'right'">
</bb-switch-ui>
readonly
The readonly input makes the switch read-only, preventing changes to its value.
<!-- Read-only switch -->
<bb-switch-ui
[label]="'Read-only switch'"
[readonly]="true">
</bb-switch-ui>
required
The required input marks the switch as required for form validation.
<!-- Required switch -->
<bb-switch-ui
[label]="'Required switch'"
[required]="true">
</bb-switch-ui>
size
The size input configures the minimum width to fit the specified number of characters for the switch element.
<!-- Switch with custom size -->
<bb-switch-ui
[label]="'Custom size'"
[size]="30">
</bb-switch-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent | void> |
Emitted when the switch loses focus |
|
focus |
EventEmitter<FocusEvent | void> |
Emitted when the switch gains 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 |
|---|---|---|
|
ariaActivedescendant |
Identifies the currently active element when focus is on a composite widget |
string |
|
ariaDescribedby |
References the element that describes the switch |
string |
|
ariaExpanded |
Indicates if the switch controls an element that is expanded or collapsed |
string |
|
ariaInvalid |
Indicates the switch value is not in the expected format |
string |
|
ariaLabel |
Sets an accessible label when no visible label is present |
string |
|
ariaLabelledby |
References elements that provide an accessible name for the switch |
string |
|
ariaOwns |
Identifies elements as part of a parent-child relationship with the switch |
string |
|
role |
Customizes the ARIA role for the switch element. Only valid ARIA widget roles are allowed. Defaults to 'switch' |
string |
- The component uses role="switch" by default, providing proper semantic meaning for assistive technologies.
- When a label is provided, it is automatically associated with the switch using aria-labelledby.
- The switch state (on/off) is communicated to screen readers through the checked state of the underlying checkbox input.
- Keyboard interaction is fully supported, allowing users to toggle the switch using the space bar or enter key.
- Focus management and visual focus indicators ensure the component is accessible via keyboard navigation.