Forms
NumberField
Number input with v-model support. Wraps the Polaris <s-number-field> web component.
Usage
<script setup>
const quantity = ref('')
</script>
<template>
<ShNumberField
v-model="quantity"
label="Quantity"
min="0"
max="100"
step="1"
/>
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | — | Bound value (use with v-model) |
label | string | — | Input label |
inputMode | 'decimal' | 'numeric' | — | Input mode for virtual keyboards |
step | number | — | Step increment |
max | number | — | Maximum value |
min | number | — | Minimum value |
prefix | string | — | Text prefix |
suffix | string | — | Text suffix |
placeholder | string | — | Placeholder text |
error | string | — | Error message |
details | string | — | Help text below the input |
autocomplete | string | — | Autocomplete attribute |
defaultValue | string | — | Default value (uncontrolled) |
labelAccessibilityVisibility | 'visible' | 'exclusive' | — | Label visibility for assistive tech |
readOnly | boolean | — | Makes the field read-only |
required | boolean | — | Marks the field as required |
disabled | boolean | — | Disables the field |
id | string | — | Element ID |
name | string | — | Form field name |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | Emitted when value changes (v-model) |
input | InputEvent | Native input event |
change | InputEvent | Native change event |
focus | InputEvent | Emitted on focus |
blur | InputEvent | Emitted on blur |
Slots
| Slot | Description |
|---|---|
default | Additional content |
Polaris Element
Renders as <s-number-field>. See Polaris NumberField docs.