Flux

Number input ​

A number input is a form-integrated numeric field with stepper buttons. Users can type a value directly, use the up and down buttons, or the arrow keys to step by the configured step. The value is clamped to min and max when stepping and on blur, and on blur it is additionally snapped to the nearest step. It is bound through v-model as a number (or null when empty).

TIP

For a standalone amount picker outside of a form (such as a quantity in a shopping cart), consider the Quantity selector instead.

Required icons

angle-up
angle-down

Props

model-value?: number | null
The numeric value of the input.

min?: number
The minimum allowed value. The value is clamped to this on blur and when stepping.

max?: number
The maximum allowed value. The value is clamped to this on blur and when stepping.

step?: number
The amount the value changes when stepping up or down. On blur the value is also snapped to the nearest multiple of this step, relative to `min` (or 0 when no `min` is set).
Default: 1

placeholder?: string
The placeholder shown when the input is empty.

disabled?: boolean
If the input is disabled.

error?: string
The error message, marking the input as invalid.

is-readonly?: boolean
If the input is read-only.

is-secondary?: boolean
If the input uses the secondary styling.

Emits

update:model-value: [number, null]
Triggered when the value changes.

blur: []
Triggered when the input loses focus.

focus: []
Triggered when the input gains focus.

Examples ​

Basic

A number input inside a form field.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField label="Amount">
                    <FluxFormNumberInput
                        v-model="amount"
                        :min="0"
                        placeholder="0"/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxForm, FluxFormField, FluxFormNumberInput, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const amount = ref<number | null>(1);
</script>

Range and step

A number input bound to a range with a custom step.

Between 16 and 28 °C, in steps of 0.5.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    label="Temperature"
                    :hint="`Between 16 and 28 °C, in steps of 0.5.`">
                    <FluxFormNumberInput
                        v-model="temperature"
                        :min="16"
                        :max="28"
                        :step="0.5"/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxForm, FluxFormField, FluxFormNumberInput, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const temperature = ref<number | null>(21);
</script>

Step snapping

Typed values snap to the nearest valid step (from min) and clamp on blur.

Snaps to the nearest multiple of 5 on blur.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    label="Quantity"
                    :hint="`Snaps to the nearest multiple of 5 on blur.`">
                    <FluxFormNumberInput
                        v-model="quantity"
                        :min="0"
                        :max="100"
                        :step="5"/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxForm, FluxFormField, FluxFormNumberInput, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const quantity = ref<number | null>(20);
</script>

Used components ​