Features
ListensUI is a Listening User Interface
Our listening user interface consists of Speech Controls and Commands that listen for your input. These features offer flexible options for building speech control into your applications.
What is Speech Control?
Speech control is the ability to control an application with speech. The user’s speech is recognized by speech recognition software that translates speech into text. The text is then inputted into the app as control elements.
Speech Controls
Controls are onscreen widgets that enable data input. Speech Controls are canonical to controls and have similar appearance and function to existing controls with the added capabilities of being controlled by Speech Commands.
Speech Commands
Speech Commands are similar to voice commands but differ from generic assistants (like Siri) because they are specific to an app and the context of a view, executing app functionality directly.
Catalog of Speech Controls
| UI Control | Description | Common Use Cases | Input Type |
|---|---|---|---|
| Text Field | Single-line input box for text entry | Login forms, search bars, name entry | Text |
| Text Area | Multi-line text input field | Comments, descriptions, messages | Text |
| Button | Clickable element that triggers an action | Submit, Save, Cancel, Delete | Action |
| Checkbox | Circular buttons for selecting one option | Settings toggles, multi-select lists | Selection |
| Radio Button | Single-choice questions | Mutually exclusive options | Selection |
| Dropdown / Select | Menu that drops down to show a list of options | Choosing country, category, status | Selection |
| Combo Box | Text field + dropdown | Autocomplete inputs | Hybrid |
| Slider | Draggable track for selecting a value | Volume, brightness, price range | Range |
| Label | Static text used to describe other controls | Form labels, headings | Display |
| Icon Button | Button containing only an icon | Toolbar actions | Action |
Light and Dark Mode in Each SDK
Every control in the catalog, plus the listening bar and popup, has a light and a dark theme. Each SDK follows the device's setting on its own, and gives you one place to switch it from your app's own theme setting.
| SDK | By Default | Switch It Yourself |
|---|---|---|
| React | Follows the device | data-listens-theme="dark" or "light" on <html> |
| Angular | Follows the device | data-listens-theme="dark" or "light" on <html> |
| React Native | Follows the device | theme={LISTENS_DARK_THEME} or LISTENS_LIGHT_THEME on ListensProvider |