s-m-r-t

Form components extend standard HTML inputs with Material Design 3 styling and voice input capabilities in smrt mode. All components support natural language input when voice mode is active.

TextInput

Text input with voice support in smrt mode.

svelte
<TextInput
  name="example"
  label="Full Name"
  description="Your first and last name"
  bind:value
/>

SelectInput

Dropdown select with voice selection support.

svelte
<SelectInput
  name="country"
  label="Country"
  options={selectOptions}
  bind:value
/>

CheckboxInput

Checkbox with voice control support.

svelte
<CheckboxInput
  name="agree"
  label="I agree to the terms"
  description="Say yes or no"
  bind:checked
/>

DateTimeInput

Date and time picker with natural language support.

svelte
<DateTimeInput
  name="appointment"
  label="Appointment Time"
  description="Say something like 'next Tuesday at 3pm'"
  bind:value
/>

All Form Components

Voice Input

In smrt mode, form inputs display a microphone button. Users can hold the button and speak naturally to fill in values. Each component type has specific voice command patterns - see individual component docs for details.

text
<!-- Example voice commands for TextInput -->
"John Smith"           → fills text input
"yes" / "no"           → toggles checkbox
"next Tuesday at 3pm"  → sets date/time
"Canada"               → selects from dropdown