SelectInput

A Material Design 3 styled select dropdown with support for voice selection in smrt mode. Provides consistent styling and integrates with the SMRT form context.

Installation

typescript

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

Basic Usage

Pass an array of options with value and label properties.

Country

svelte

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

  const options = [
    { value: 'ca', label: 'Canada' },
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'au', label: 'Australia' }
  ];
</script>

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

With Default Value

Set an initial value to pre-select an option.

Priority Level

svelte

<SelectInput
  name="priority"
  label="Priority Level"
  options={priorityOptions}
  value="medium"
/>

Required Field

Add required to mark the field as required.

Size*

svelte

<SelectInput
  name="size"
  label="Size"
  options={sizeOptions}
  required
  bind:value
/>

Disabled State

Use disabled to prevent user interaction.

Disabled Select

svelte

<SelectInput
  name="disabled"
  label="Disabled Select"
  options={sizeOptions}
  value="md"
  disabled
/>

Custom Placeholder

Customize the placeholder text shown when no option is selected.

Select Your Country

svelte

<SelectInput
  name="country"
  label="Select Your Country"
  options={countryOptions}
  placeholder="Choose a country..."
/>

With Description

Add a description for additional context, shown when focused.

Country of Residence

svelte

<SelectInput
  name="country"
  label="Country of Residence"
  description="Select where you currently live"
  options={countryOptions}
/>

Interactive Example

Select an option to see the bound value update:

Pick a size

Selected: (none)

svelte

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

<SelectInput
  name="interactive"
  label="Pick a size"
  options={sizeOptions}
  bind:value
/>
<p>Selected: {value || '(none)'}</p>

Props

Prop	Type	Default	Description
`name` *	`string`	-	Field name for form submission
`label`	`string`	`undefined`	Field label displayed above the select
`description`	`string`	`undefined`	Description text for voice extraction context
`options` *	`SelectOption[]`	-	Array of options with value and label properties
`placeholder`	`string`	`'Select an option...'`	Placeholder text shown when no option is selected
`value`	`string`	`''`	Currently selected value (bindable)
`disabled`	`boolean`	`false`	Disables the select
`required`	`boolean`	`false`	Marks field as required
`onchange`	`(value: string) => void`	`undefined`	Callback when selection changes

TypeScript

typescript

import { SelectInput } from '@happyvertical/smrt-svelte';
import type { SelectOption } from '@happyvertical/smrt-svelte';

// SelectOption interface
interface SelectOption {
  value: string;
  label: string;
}

// Props interface
interface Props {
  name: string;
  label?: string;
  description?: string;
  options: SelectOption[];
  placeholder?: string;
  value?: string;
  disabled?: boolean;
  required?: boolean;
  onchange?: (value: string) => void;
}