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

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

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

Contrast:muted

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

Show code

Contrast:muted+

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

Show code

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

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

Disabled

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

Show code

Loading

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

Show code

#<BaseInputNumber>

Model

v-model
Show example

Properties

rounded
The radius of the input.

@since

2.0.0

@default

'sm'

Show example
size
The size of the input.

@default

'md'

Show example
type
The type of input.
Show example
label
The label to display for the input.
Show example
id
The form input identifier.
Show example
contrast
The contrast of the input.

@default

'default'

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

Slots

#label
Show example
#icon
Show example

Exposed

el
The underlying HTMLInputElement element.
The underlying HTMLInputElement element.
Show example