Documentation
Documentation Hub

Radius

Inputs can be customized to show different radius factors. The default shape is rounded:sm. You can change the shape of all inputs by setting the rounded property.

Default props of all <BaseInputNumber> can be set in your <app>/app.config.ts.
Show code
vue

Size

Inputs can have different sizes. The default size is md. You can change the size of all inputs by setting the size property.

Show code
vue

Contrast:default+

Inputs can have different contrasts. The default contrast is default. You can change the contrast of an input number by setting the contrast property.

Show code
vue

Contrast:muted

Inputs can have different contrasts. You can change the contrast of an input number by setting the contrast property.

Show code
vue

Contrast:muted+

Inputs can have different contrasts. You can change the contrast of an input number by setting the contrast property.

Show code
vue

Icon

Inputs can have a configurable icon on the left side using the icon prop. Make sure to pick meaningful icons for your use case.

You can also change icons for increment and decrement buttons using the icon-decrement and icon-increment props.

Show code
vue

Step, min and max

You can change the step used by the increment and decrement buttons using the step prop, which defaults to 1.

Defining a min and max value will prevent the increment and decrement buttons from going beyond these values but will not prevent the user from typing a value outside of the range.

Show code
vue

Disabled

Inputs can be shown in a disabled using the disabled prop.

Show code
vue

Loading

Inputs can be shown in a loading using the loading prop.

Show code
vue

#<BaseInputNumber>

•Model

v-model
modifiers

v-model.lazy

Show example
vue

•Properties

classes
Optional CSS classes to apply to the wrapper, label, input, addon, error, and icon elements.
Show example
vue
color-focus
Whether the color of the input should change when it is focused.
Show example
vue
disabled
Whether the input is in a disabled state.
Show example
vue
error
An error message or boolean value indicating whether the input is in an error state.
Show example
vue
icon
The icon to display for the input.
Show example
vue
icon-decrement
The icon to display for the decrement button.
Show example
vue
icon-increment
The icon to display for the increment button.
Show example
vue
id
The form input identifier.
Show example
vue
inputmode
The inputmode to use for the input, usually for mobile devices.
Show example
vue
label
The label to display for the input.
Show example
vue
label-float
If the label should be floating.
Show example
vue
loading
Whether the input is in a loading state.
Show example
vue
max
Maximum value allowed when decrementing
Show example
vue
min
Minimum value allowed when decrementing
Show example
vue
placeholder
The placeholder to display for the input.
Show example
vue
step
Sets the stepping interval when clicking up and down spinner buttons
Show example
vue
type
The type of input.
Show example
vue

•Properties (with app.config)

rounded
The radius of the input.

@since

2.0.0

Show example
vue
contrast
The contrast of the input.
Show example
vue
size
The size of the input.
Show example
vue

•Slots

#label
This slot has no inherted props
Show example
vue
#icon
This slot has no inherted props
Show example
vue

•Exposed

rounded
The radius of the input.
Show example
vue
contrast
The contrast of the input.
Show example
vue
size
The size of the input.
Show example
vue
el
The underlying HTMLInputElement element.
Show example
vue