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 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

chevron-up
chevron-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.
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-condensed?: boolean
If the input uses the condensed height.

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.

<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>

Used components ​