import { KbqRadioModule } from '@koobiq/components/radio';@Component({ selector: 'kbq-radio-button', exportAs: 'kbqRadioButton' }) class KbqRadioButton extends KbqColorDirective { checked = input<boolean | undefined>(); value = input<NonNullable<unknown> | null | undefined>(); disabled = input<boolean | undefined>(); required = input<boolean | undefined>(); labelPosition = input<'before' | 'after' | undefined>(); name = input<string | undefined>(); readonly id = input<string>(this.uniqueId); readonly color = input<T | null | undefined>(); readonly change = output<KbqRadioChange>(); readonly inputElement: Signal<ElementRef<HTMLInputElement>>; radioGroup: KbqRadioGroup | null; readonly inputId: Signal<string>; get colorClassName(): string; focus(origin?: FocusOrigin): void; markForCheck(): void; onInputClick(event: Event): void; onInputChange(event: Event): void; setDefaultColor(color: T): void; }
checkedboolean | undefined Whether this radio button is checked.
valueNonNullable<unknown> | null | undefined The value of this radio button.
disabledboolean | undefined Whether the radio button is disabled. A button inside a disabled group is disabled as well.
requiredboolean | undefined Whether the radio button is required. A button inside a required group is required as well.
labelPosition'before' | 'after' | undefined Whether the label should appear after or before the radio button. Defaults to 'after'
namestring | undefined Analog to HTML 'name' attribute used to group radios for unique selection. Defaults to the parent group's name, or — outside a group — to an id unique to this button.
idstring A unique id for the radio button. If none is supplied — or null is bound explicitly — it is
auto-generated, so a read always yields the id the element actually carries.
colorT | null | undefined Color of the component. A value set in code holds until the input changes, and the default color is used while both are unset or falsy.
changeKbqRadioChange Event emitted when the checked state of this radio button changes.
Change events are only emitted when the value changes due to user interaction with
the radio button (the same behavior as <input type-"radio">).
inputElementSignal<ElementRef<HTMLInputElement>> The native <input type=radio> element
radioGroupKbqRadioGroup | null The parent radio group. null when the button is used outside one.
inputIdSignal<string> ID of the native input element inside <kbq-radio-button>
colorClassNamestring current class name of color
focus()void Focuses the radio button.
Routed through the FocusMonitor so the origin is recorded: the focus ring is keyed off
.cdk-keyboard-focused, which a bare element.focus() never produces.
markForCheck()void Marks the radio button as needing checking for change detection.
Kept for back-compatibility. A button derives its state from signals, its own and its group's, so it re-renders on its own and nothing in the library calls this any more.
setDefaultColor()void this color will be used as a default value. For example [color]="'' | false | undefined | null".
Selection group for KbqRadioButton.
The host is a radiogroup, which is not a name-from-content role, so it reaches assistive
technology unnamed unless the consumer names it. Name it with a plain aria-label /
aria-labelledby attribute pointing at the visible group label: the host is the very element the
consumer writes, so an input aliased to the same name would only write back what is already there —
and would wipe an [attr.aria-label] binding, which never reaches the input.
To show a validation error, bind the group to a form control and put the error text in a kbq-error inside the
group. A kbq-hint put inside the group is shown under the options, below the error.
@Component({ selector: 'kbq-radio-group', exportAs: 'kbqRadioGroup' }) class KbqRadioGroup extends KbqColorDirective implements ControlValueAccessor, CanUpdateErrorState { readonly errorStateMatcher = input<ErrorStateMatcher>(); readonly big = input<boolean>(false); readonly name = input<string>( inject(_IdGenerator).getId('kbq-radio-group-') ); readonly labelPosition = input<'before' | 'after'>('after'); value = input<NonNullable<unknown> | null | undefined>(); selected = input<KbqRadioButton | null | undefined>(); disabled = input<boolean | undefined>(); readonly required = input<boolean>(false); readonly color = input<T | null | undefined>(); readonly change = output<KbqRadioChange>(); readonly errorState: Signal<boolean>; get radios(): QueryList<KbqRadioButton>; get colorClassName(): string; checkSelectedRadioButton(): void; updateErrorState(): void; focus(origin?: FocusOrigin): void; touch(): void; emitChangeEvent(): void; markRadiosForCheck(): void; setDefaultColor(color: T): void; }
errorStateMatcherErrorStateMatcher An object used to control when the error state is shown.
namestring Name of the radio button group. All radio buttons inside this group will use this name, unless they were given one of their own.
labelPosition'before' | 'after' Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
valueNonNullable<unknown> | null | undefined Value of the radio button.
selectedKbqRadioButton | null | undefined Whether the radio button is selected.
disabledboolean | undefined Whether the radio group is disabled
requiredboolean Whether the radio group is required
colorT | null | undefined Color of the component. A value set in code holds until the input changes, and the default color is used while both are unset or falsy.
changeKbqRadioChange Event emitted when the group value changes.
Change events are only emitted when the value changes due to user interaction with
a radio button (the same behavior as <input type-"radio">).
errorStateSignal<boolean> Whether the radio group is in an error state.
radiosQueryList<KbqRadioButton> Child radio buttons.
colorClassNamestring current class name of color
updateErrorState()void Updates the error state based on the error state matcher.
focus()void Moves focus to the checked radio button, or to the first enabled one when nothing is checked — the same rule the browser follows when the group is reached with Tab.
touch()void Mark this group as being "touched" (for ngModel). Meant to be called by the contained radio buttons upon their blur.
emitChangeEvent()void Dispatch change event with current selection and group value.
markRadiosForCheck()void Marks every radio button of the group for a change-detection check.
Kept for back-compatibility. A button derives checked and disabled from signals, its own and its
group's, so it re-renders on its own and nothing in the library calls this any more.
setDefaultColor()void this color will be used as a default value. For example [color]="'' | false | undefined | null".
Change event object emitted by KbqRadio.
class KbqRadioChange { source: KbqRadioButton; value: any; constructor(source: KbqRadioButton, value: any); }
sourceKbqRadioButton The KbqRadioButton that emits the change event.
valueany The value of the KbqRadioButton.
constructor()sourceKbqRadioButton The KbqRadioButton that emits the change event.
valueany The value of the KbqRadioButton.