logo-icon
STWUI

InputNumber

InputNumber is an input field for numbers.



svelte
<script lang="ts">
	import { InputNumber } from 'stwui';

	const phone = "svg-path";
</script>

<InputNumber name="input-number-1" placeholder="Basic" />

<InputNumber name="input-number-2">
	<InputNumber.Label slot="label">Number</InputNumber.Label>
	<InputNumber.Trailing slot="trailing" data={phone} />
</InputNumber>

InputNumber Props

name string
error string | undefined
placholder string | undefined
value string | undefined
autocomplete 'on' | 'off' | undefined
autocapitalize 'off' | 'none' | 'sentences' | 'words' | 'characters' off
readonly boolean
disabled boolean false
step numbers 1

InputNumber Slots

label <InputNumber.Label slot="label" />
leading <InputNumber.Leading slot="leading" />
trailing <InputNumber.Trailing slot="trailing" />

InputNumber.Label Slots

default

InputNumber.Leading Props

data string (IconData)
viewBox string 0 0 24 24
size string 24px
width string 24px
height string 24px
color string currentColor
stroke string | undefined
fill string currentColor

InputNumber.Trailing Props

data string (IconData)
viewBox string 0 0 24 24
size string 24px
width string 24px
height string 24px
color string currentColor
stroke string | undefined
fill string currentColor