TextInput

A Material Design 3 inspired text input with optional voice input support in smrt mode. Supports text and email types with built-in validation.

Installation

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

Basic Usage

The simplest text input with a label and bindable value.

<script lang="ts">
  let value = $state('');
</script>

<TextInput
  name="username"
  label="Username"
  bind:value
/>

Email Type

Use type="email" for built-in email validation.

<TextInput
  name="email"
  label="Email Address"
  type="email"
  placeholder="you@example.com"
  bind:value
/>

Required Field

Add required to mark the field as required (shows an asterisk).

<TextInput
  name="fullName"
  label="Full Name"
  required
  bind:value
/>

Disabled State

Use disabled to prevent user interaction.

<TextInput
  name="disabled"
  label="Disabled Field"
  value="Cannot edit this"
  disabled
/>

With Description

Add a description for context, shown when the field is focused. Also used by AI for voice extraction.

<TextInput
  name="bio"
  label="Short Bio"
  description="A brief description about yourself"
  placeholder="Tell us about yourself..."
/>

Voice Input (smrt Mode)

When the application is in smrt mode, a microphone button appears. Users can hold to speak and the input will be processed via speech-to-text. The appendMode prop controls whether spoken text replaces or appends to existing content.

<!-- In smrt mode, this input shows a mic button -->
<TextInput
  name="notes"
  label="Notes"
  appendMode
  description="Any additional notes"
/>

Interactive Example

Type in the field to see the bound value update:

<script lang="ts">
  let value = $state('');
</script>

<TextInput
  name="interactive"
  label="Type something"
  bind:value
/>
<p>Current value: {value || '(empty)'}</p>

Props

TypeScript

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

// Props interface
interface Props {
  name: string;
  label?: string;
  description?: string;
  type?: 'text' | 'email';
  placeholder?: string;
  value?: string;
  disabled?: boolean;
  required?: boolean;
  appendMode?: boolean;
  onchange?: (value: string) => void;
}