Import
import { InputRadioGroupModule } from '@backbase/ui-ang/input-radio-group'
Usage
Use the bb-input-radio-group-ui component to render a set of radio options bound to a single value.
<!-- Basic input radio group usage -->
<bb-input-radio-group-ui label="Pick one">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
<bb-input-radio-ui value="b" label="Option B"></bb-input-radio-ui>
<bb-input-radio-ui value="c" label="Option C"></bb-input-radio-ui>
</bb-input-radio-group-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
autofocus |
boolean |
false |
|
disabled |
boolean |
false |
|
horizontal |
boolean |
false |
|
inputClassName |
string |
undefined |
|
label |
string |
'' |
|
labelTemplate |
TemplateRef<any> |
undefined |
|
labelTemplateContext |
any |
undefined |
|
name |
string |
A unique string (e.g., input_radio_group_<id>) |
|
preselect |
boolean |
true |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
size |
number | string |
20 |
|
verticalAlign |
'middle' | 'top' | 'bottom' |
'middle' |
|
visuallyHiddenLabel |
boolean |
false |
autofocus
The autofocus input requests focus on the first enabled radio after initialization. Defaults to false.
<!-- Radio group that requests focus on init -->
<bb-input-radio-group-ui [autofocus]="true" label="Pick one">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
<bb-input-radio-ui value="b" label="Option B"></bb-input-radio-ui>
</bb-input-radio-group-ui>
disabled
The disabled input disables the entire group. Defaults to false.
<!-- Disabled radio group -->
<bb-input-radio-group-ui [disabled]="true" label="Pick one">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
<bb-input-radio-ui value="b" label="Option B"></bb-input-radio-ui>
</bb-input-radio-group-ui>
horizontal
The horizontal input lays out radios horizontally. Defaults to false.
<!-- Horizontal radio group -->
<bb-input-radio-group-ui [horizontal]="true" label="Pick one">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
<bb-input-radio-ui value="b" label="Option B"></bb-input-radio-ui>
</bb-input-radio-group-ui>
inputClassName
The inputClassName input adds custom classes to the group container. Defaults to undefined.
<!-- Radio group with custom class -->
<bb-input-radio-group-ui inputClassName="my-radio-group" label="Pick one">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
<bb-input-radio-ui value="b" label="Option B"></bb-input-radio-ui>
</bb-input-radio-group-ui>
label
The label input sets the group legend.
<!-- Radio group with legend -->
<bb-input-radio-group-ui label="Choose a plan">
<bb-input-radio-ui value="basic" label="Basic"></bb-input-radio-ui>
<bb-input-radio-ui value="pro" label="Pro"></bb-input-radio-ui>
</bb-input-radio-group-ui>
labelTemplate
The labelTemplate input provides a custom template for the group label.
<!-- Radio group with custom label template -->
<ng-template #groupLabel let-labelTemplateContext="labelTemplateContext">
<span class="text-muted">{{ labelTemplateContext.label }}</span>
</ng-template>
<bb-input-radio-group-ui
[labelTemplate]="groupLabel"
[labelTemplateContext]="{ label: 'Pick one' }">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
</bb-input-radio-group-ui>
labelTemplateContext
The labelTemplateContext input passes context data to the labelTemplate.
<!-- Radio group with label template context -->
<bb-input-radio-group-ui
[labelTemplate]="groupLabel"
[labelTemplateContext]="{ label: 'Pick one' }">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
</bb-input-radio-group-ui>
name
The name input sets the native name for the group; a unique default is generated.
<!-- Radio group with explicit name -->
<bb-input-radio-group-ui name="plan" label="Choose a plan">
<bb-input-radio-ui value="basic" label="Basic"></bb-input-radio-ui>
<bb-input-radio-ui value="pro" label="Pro"></bb-input-radio-ui>
</bb-input-radio-group-ui>
preselect
The preselect input automatically selects the first radio on init when no value is set. Defaults to true.
<!-- Radio group without preselection -->
<bb-input-radio-group-ui [preselect]="false" label="Pick one">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
</bb-input-radio-group-ui>
readonly
The readonly input prevents changing the selection. Defaults to false.
<!-- Read-only radio group -->
<bb-input-radio-group-ui [readonly]="true" label="Pick one">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
</bb-input-radio-group-ui>
required
The required input marks the group as required; individual radios will respect disabled. Defaults to false.
<!-- Required radio group -->
<bb-input-radio-group-ui [required]="true" label="Pick one">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
</bb-input-radio-group-ui>
size
The size input configures the minimum width to fit the specified number of characters for internal inputs. Defaults to 20.
<!-- Radio group with adjusted size -->
<bb-input-radio-group-ui [size]="24" label="Pick one">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
</bb-input-radio-group-ui>
verticalAlign
The verticalAlign input controls vertical alignment of radios: 'middle', 'top', or 'bottom'. Defaults to 'middle'.
<!-- Radio group with top-aligned radios -->
<bb-input-radio-group-ui verticalAlign="top" label="Pick one">
<bb-input-radio-ui value="a" label="Option A"></bb-input-radio-ui>
<bb-input-radio-ui value="b" label="Option B"></bb-input-radio-ui>
</bb-input-radio-group-ui>
visuallyHiddenLabel
Whether to visually hide the fieldset legend (label) element while keeping it accessible to screen readers.
<bb-input-radio-group-ui label="Input Radio Group" [visuallyHiddenLabel]="true">
<bb-input-radio-ui value="option1" label="Option 1" />
<bb-input-radio-ui value="option2" label="Option 2" />
</bb-input-radio-group-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent> |
Emitted when a radio loses focus |
|
focus |
EventEmitter<FocusEvent> |
Emitted when a radio gains focus |
|
valueChange |
EventEmitter<any> |
Emitted when the selected value changes |
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 |
|
ariaControls |
Indicates which element(s) the widget controls |
string |
|
ariaDescribedby |
References the element that describes the 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 for the group or radio |
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 control |
string |