Toggle
listens-toggle@listenssoft/speechui-angularAn on/off switch that flips when its command is heard: “dark mode”.
Speaking the command toggles the switch — the same trigger pattern as a button, applied to a boolean. Clicking and keyboard toggling work as on any switch, speech or no speech.
Basic toggle
Loading the Angular kit…
Hold anywhere and say:“dark mode”
Props
- default Leading
- default command
- default false
Angular
Updates as you tick propsimport { Component } from "@angular/core";import { FormsModule } from "@angular/forms";import { ListensToggleComponent } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-toggle", imports: [ListensToggleComponent, FormsModule], template: ` <listens-toggle label="Dark mode" command="dark mode" [(ngModel)]="enabled" /> `,})export class DemoToggle { enabled = false;}Bare mode (React)
React-only: bare renders just the underlying checkbox input so a parent supplies the visual switch — for Tailwind switches and design systems. className, id, and name forward to the input.
Angular
// The Angular kit has no bare mode on listens-toggle. For a fully
// custom switch, bind a command directive to your own control instead:
//
// <button listensCommand="autopilot" (click)="on = !on">…</button>
//
// See the command page for the directive's full API.What you can say
| Say | Effect |
|---|---|
| “dark mode” | Toggles the switch once. |
| “…turn on dark mode please…” | Also toggles — matching is contains. (The words “on/off” are not parsed; each match flips the current state.) |
| “dark mode … (again within ~1s)” | Ignored by the per-command cooldown; repeat after a brief pause to flip back. |
The toggle flips on each match rather than parsing an on/off argument — say it again to flip back. Pair it with listeningContent to show the current effect (“say: dark mode to turn off”).
API reference
Angular inputs & outputs for @listenssoft/speechui-angular.
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
position | HorizontalPosition | Leading | Switch leads or trails the label. |
listeningContent | string | command | Text shown beside the switch while the mic is open. |
disabled | boolean | false | Disables the switch; forms setDisabledState toggles it too. |
Extra inputs
| Input | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Two-way bindable — [(checked)]. Also driven by ngModel / formControlName (ControlValueAccessor, boolean). |
label | string | "" | Label beside the switch; the command fallback. |
command | string | label | The spoken command that toggles the switch. |
Outputs
| Output | Type | Default | Description |
|---|---|---|---|
checkedChange | boolean | — | Emits the next state — the [(checked)] channel. |
Styling hooks
CSS hooks
| Hook | Type | Default | Description |
|---|---|---|---|
.listens-toggle (root) | class | — | Same part classes as React: -track, -thumb, -input, -label. |
--listens-success / --listens-track / --listens-toggle-thumb | token | — | The switch's three colors — override on :root to retheme. |
data-checked / data-listening | attribute | — | State attributes on the root for styling both states directly. |
Behavior notes
- Angular: Boolean forms integration comes for free:
[(ngModel)]andformControlNameboth drive it. See the forms guide.
