Number Input

Number Inputs are form components used to for inputting and manipulating numbers.


Number Input

Disabled State

Disabled Number Input

Minimum and Maximum Value

Number Input Minimum and Maximum Value

Step Size

You can set the increment / decrement step by using the step property. The step is 1 by default.

Number Input Step Size


You can set the number precision using the precision property, allowing you to enter floating point numbers into the input.

Number Input Precision

Prefix and Suffix

Inkline allows you to easily add a prefix or suffix to your inputs. Using prefixes and suffixes you can, indicate your input type using an icon or text.

Number Input Prefix and Suffix

Prepend and Append

You can add additional content such as select fields, buttons or plain text, to either side of the input by using the prepend and append slots.

Number Input Prepend


You're able to use the size modifier to control the size of your inputs, using one of the available sizes: sm, md, and lg. The default size is set to md.

Number Input Sizes

Component API

Here you can find a list of the various customization options you can use for the number input components as props, as well as available slots and events.

Input Number API

Sass Variables

Modifying the Input Component Sass Variables will also change the Number Input component. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.