# Number Input

## Example

```svelte
<script>
	import { NumberInput } from '@foxui/all';
</script>

<NumberInput />
```

## Documentation

## Usage

```svelte
<NumberInput min={0} max={100} bind:value />
```

## Sources

Based on "number-flow" (https://number-flow.barvian.me/)

## API Reference

### NumberInput
A numeric input with animated value transitions. Uses number-flow for smooth animations.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | `number` | `50` | The current numeric value. (bindable) |
| min | `number` | `0` | The minimum allowed value. |
| max | `number` | `999` | The maximum allowed value. |
| step | `number` | `1` | The step increment for the input. |
| defaultValue | `number` | `0` | The initial default value. |
| variant | `'primary' | 'secondary'` | `'primary'` | The visual variant. |
| size | `'default' | 'sm' | 'lg'` | `'default'` | The size of the input. |
| tabindex | `number` | `-` | The tabindex of the input. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLDivElement` | `-` | The underlying container DOM element. (bindable) |
| inputRef | `HTMLInputElement` | `-` | Reference to the inner input element. (bindable) |