FormMicButton

A microphone icon button that appears in SMRT mode to trigger form-level voice filling. Only visible when inside a Form component and when SMRT mode is active.

Installation

import { FormMicButton } from '@happyvertical/smrt-svelte';

Basic Usage

Add a mic button next to a form title or label.

<script lang="ts">
  import { Form, FormMicButton, TextInput } from '@happyvertical/smrt-svelte';
</script>

<Form>
  <h2>Contact Form <FormMicButton /></h2>
  <TextInput name="name" label="Name" />
  <TextInput name="email" label="Email" type="email" />
</Form>

With Custom Size

Adjust the icon size to match your design.

<h2>
  Contact Form
  <FormMicButton size={20} />
</h2>

Visual States

• Default - Gray microphone icon, hover reveals darker color
• Listening - Green, pulsing animation, shows tooltip
• Extracting - Green spinner while processing speech
• Hidden - Not rendered when not in SMRT mode or outside Form

Interaction

• Click to start listening (same as clicking "Speak all fields")
• Click again to stop listening
• Press Enter when focused for keyboard accessibility

Props

TypeScript

import { FormMicButton } from '@happyvertical/smrt-svelte';

interface FormMicButtonProps {
  size?: number;
  class?: string;
}

Context Requirement

FormMicButton requires being inside a Form component. It uses the form context to toggle listening state. If used outside a Form, it renders nothing.

// Works - inside Form
<Form>
  <h2>Title <FormMicButton /></h2>
</Form>

// Renders nothing - outside Form
<div>
  <FormMicButton /> <!-- invisible -->
</div>