NumberInput

A numeric input component with constraints, step controls, and voice input support in smrt mode. Handles both integers and decimals with proper validation.

Installation

typescript

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

Basic Usage

A simple number input for integer values.

Quantity

svelte

<script lang="ts">
  let value = $state<number | null>(null);
</script>

<NumberInput
  name="quantity"
  label="Quantity"
  bind:value
/>

With Default Value

Pre-populate with an initial number.

Age

svelte

<NumberInput
  name="age"
  label="Age"
  value={25}
/>

With Constraints

Use min and max to limit the value range.

Items

svelte

<NumberInput
  name="items"
  label="Items"
  min={1}
  max={100}
  value={1}
  description="Between 1 and 100"
/>

Custom Step

Set the step for increment/decrement controls.

Discount (%)

svelte

<NumberInput
  name="discount"
  label="Discount (%)"
  min={0}
  max={100}
  step={5}
  placeholder="0"
/>

Required Field

Add required to mark the field as required.

Number of Participants *

svelte

<NumberInput
  name="participants"
  label="Number of Participants"
  min={1}
  required
/>

Disabled State

Use disabled to prevent user interaction.

Total Score

svelte

<NumberInput
  name="total"
  label="Total Score"
  value={87}
  disabled
/>

Voice Input (smrt Mode)

In smrt mode, users can speak numbers naturally. The component parses:

"twenty five" → 25
"one hundred fifty" → 150
"three point one four" → 3.14
"negative ten" → -10
"zero" → 0

svelte

<!-- Voice example: "twenty five" -->
<NumberInput
  name="voice"
  label="Enter a Number"
  description="A numeric value"
/>

Interactive Example

Enter a number to see validation and value updates:

Enter Value

Current value: null

Valid: No

svelte

<script lang="ts">
  let value = $state<number | null>(null);
</script>

<NumberInput
  name="interactive"
  label="Enter Value"
  min={0}
  max={1000}
  bind:value
/>
<p>Current value: {value ?? 'null'}</p>
<p>Valid: {value !== null && value >= 0 && value <= 1000 ? 'Yes' : 'No'}</p>

Props

Prop	Type	Default	Description
`name` *	`string`	-	Field name for form submission
`label`	`string`	`undefined`	Field label displayed above the input
`description`	`string`	`undefined`	Description text for voice extraction context
`placeholder`	`string`	`'0'`	Placeholder text shown when empty
`value`	`number \| null`	`null`	Current numeric value (bindable)
`min`	`number`	`undefined`	Minimum allowed value
`max`	`number`	`undefined`	Maximum allowed value
`step`	`number`	`1`	Increment/decrement step value
`disabled`	`boolean`	`false`	Disables the input
`required`	`boolean`	`false`	Marks field as required
`onchange`	`(value: number \| null) => void`	`undefined`	Callback when value changes

TypeScript

typescript

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

// Props interface
interface Props {
  name: string;
  label?: string;
  description?: string;
  placeholder?: string;
  value?: number | null;
  min?: number;
  max?: number;
  step?: number;
  disabled?: boolean;
  required?: boolean;
  onchange?: (value: number | null) => void;
}

Validation

The component enforces constraints automatically:

Values outside min/max range are rejected
Non-numeric input is stripped
The step prop controls decimal precision (e.g., step=0.01 for 2 decimal places)
Required fields prevent form submission when empty
Browser native validation provides immediate feedback