Radio group
listens-radio-group@listenssoft/speechui-angularSingle select by voice: “size large” picks Large.
Say the command followed by an option. The group claims the phrase only when something follows the command, then matches the remainder against options as whole words — longest matching phrase wins, so “Very Satisfied” beats “Satisfied” when both fit. aliases map spoken words to option values, which is how “standard” selects STD.
Basic single select
Loading the Angular kit…
Hold anywhere and say:“size large”“size small”
Props
- default command
- default false
import { Component } from "@angular/core";import { FormsModule } from "@angular/forms";import { ListensRadioGroupComponent } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-radio-group", imports: [ListensRadioGroupComponent, FormsModule], template: ` <listens-radio-group label="Size" command="size" [options]="['Small', 'Medium', 'Large']" [(ngModel)]="size" /> `,})export class DemoRadioGroup { size = "Medium";}Aliases for spoken names
Option values are often codes or abbreviations nobody would say aloud. aliases maps each value to the phrases people actually speak.
Loading the Angular kit…
Hold anywhere and say:“shipping express”“shipping overnight”
import { Component } from "@angular/core";import { FormsModule } from "@angular/forms";import { ListensRadioGroupComponent } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-radio-aliases", imports: [ListensRadioGroupComponent, FormsModule], template: ` <listens-radio-group label="Shipping" command="shipping" [options]="['STD', 'EXP', 'PRI']" [aliases]="{ STD: ['standard', 'regular'], EXP: ['express', 'fast'], PRI: ['priority', 'overnight'] }" [(ngModel)]="shipping" /> `,})export class DemoRadioAliases { shipping = "STD";}What you can say
| Say | Effect |
|---|---|
| “size large” | Selects “Large”. The command must lead the phrase, with the option after it. |
| “size extra large” | Selects the longest option whose words all appear — “Extra Large” beats “Large” when both are options. |
| “shipping overnight” | Aliases resolve to their option value (“overnight” → PRI). |
| “large (alone)” | No effect — without the leading command the group never claims the phrase. |
Matching is whole-word: “size l” matches nothing, and stray words around the option are fine (“size large please”).
API reference
Angular inputs & outputs for @listenssoft/speechui-angular.
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
listeningContent | string | command | Label text while the mic is open. |
disabled | boolean | false | Disables the radios; forms setDisabledState too. |
Extra inputs
| Input | Type | Default | Description |
|---|---|---|---|
value | string | "" | Two-way bindable — [(value)]; also ngModel / formControlName (ControlValueAccessor, string). |
options | string[] | [] | The selectable values. |
command | string | label | The spoken prefix; “<command> <option>” selects. |
label | string | "" | Group label; the command fallback. |
aliases | Record<string, string[]> | {} | Spoken aliases per option value. |
Outputs
| Output | Type | Default | Description |
|---|---|---|---|
valueChange | string | — | The [(value)] channel. |
matched | string | — | Emits when speech selects an option. |
Styling hooks
CSS hooks
| Hook | Type | Default | Description |
|---|---|---|---|
.listens-radio-group (root) | class | — | Same part classes as React. |
--listens-interactive | token | — | The radio accent color. |
Behavior notes
- All frameworks: The radio group uses the two-pass claim flow: it claims only when the command leads with a non-empty remainder, so “size” alone leaves the transcript for others.
