New to Kendo UI for Vue? Start a free 30-day trial

SpeechToTextButton Configuration Options

Updated on Nov 11, 2026

The Kendo UI for Vue SpeechToTextButton offers various configuration options for controlling how speech recognition works. To enhance the speech recognition experience of the component, you can configure how it handles speech input and provides recognition results.

The SpeechToTextButton provides options for:

Continuous recognition—Enable the SpeechToTextButton to keep listening for additional speech input without requiring the user to click the button again.
Interim results—Allow the SpeechToTextButton to provide interim results while the user is still speaking.
Multiple recognition alternatives—Enable the SpeechToTextButton to return multiple recognition alternatives for a given speech input.
Language recognition—Configure the SpeechToTextButton to recognize speech in different languages by specifying a BCP 47 language tag.

The following example combines continuous recognition, interim results, and multiple recognition alternatives.

Loading ...

Continuous Recognition

The continuous property determines whether recognition continues after it returns a result. It defaults to false, so the SpeechToTextButton stops listening after recognizing a single phrase. Set it to true to keep listening for additional speech input without requiring the user to click the button again; the browser may still end the session.

vue

<SpeechToTextButton :continuous="true" @result="onResult" />

When continuous recognition is enabled:

The button remains active and continues listening after recognizing speech.
Multiple phrases can be recognized in sequence.
The recognition session can continue until the user stops it, an error occurs, or the browser ends it.
The result event fires for each recognized phrase.

The following example demonstrates continuous recognition.

Loading ...

Interim Results

The SpeechToTextButton can provide interim (in-progress) results while the user is still speaking. This feature is useful for creating real-time speech-to-text experiences where users can see their words appear as they speak. For example, when working with voice input in messenger or note taking apps.

By default, the component returns only final results. To enable interim results, set the interimResults property to true:

vue

<SpeechToTextButton :interim-results="true" @result="onResult" />

When interim results are enabled:

The result event fires multiple times during speech recognition.
The isFinal property of the SpeechToTextResultEvent indicates whether the result is final or interim.
Interim results may change as the recognition engine processes more audio.
Final results are provided when the engine has completed processing a phrase.

To handle interim results, check the isFinal property on the SpeechToTextResultEvent:

vue

<script setup>
const onResult = (event) => {
    if (event.alternatives.length > 0) {
        const transcript = event.alternatives[0].transcript;

        if (event.isFinal) {
            finalText.value += transcript + ' ';
            interimText.value = '';
        } else {
            interimText.value = transcript;
        }
    }
};
</script>

The following example demonstrates the interim results functionality.

Loading ...

Multiple Recognition Alternatives

The speech recognition engine can provide multiple alternative transcripts for the same audio input. This is useful when you want to give users choices or implement custom logic to select the best transcript.

To configure the number of transcripts provided, set the maxAlternatives property:

vue

<SpeechToTextButton :max-alternatives="3" @result="onResult" />

By default, the component requests one transcript. The recognition engine may return fewer alternatives than requested.

Each alternative in the SpeechToTextResultEvent alternatives array contains:

transcript—The recognized text.
confidence—A confidence score from 0 to 1 that indicates the engine's certainty.

Process the multiple alternatives in your event handler:

vue

<script setup>
const onResult = (event) => {
    if (event.alternatives.length > 0) {
        allAlternatives.value = event.alternatives;

        const bestAlternative = event.alternatives.reduce((best, current) =>
            current.confidence > best.confidence ? current : best
        );

        selectedTranscript.value = bestAlternative.transcript;
    }
};
</script>

The following example demonstrates multiple recognition alternatives.

Loading ...

Language Recognition

The SpeechToTextButton supports recognizing speech in different languages by specifying a BCP 47 language tag through the lang property. This allows you to tailor the speech recognition experience to your application's audience and support multilingual scenarios.

Language Selection

To configure the language for speech recognition, set the lang property to a valid BCP 47 language tag (for example, 'en-US' for American English, 'de-DE' for German, or 'es-ES' for Spanish).

vue

<SpeechToTextButton lang="es-ES" />

By default, the SpeechToTextButton uses 'en-US' (American English) if no language is specified.

The following example lets you select from sample language tags offered by the demo.

Loading ...

Language Support

The demo's language tags are examples, not a complete or guaranteed list. Available languages depend on the speech recognition engine. When integrationMode is WebSpeech, refer to the Web Speech API list of supported languages and browser compatibility table. When integrationMode is None, a custom provider must handle the language and recognition settings it supports.