Number Input

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

Inkline provides you with simple solutions for all the scenarios you will encounter when you need your user to input a number.

Minimum and Maximum Value

Setting the min and max properties will restrict the value within the given range.


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

Step Size

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

Disabled State

Setting the disabled property will disable all interactions with the number input component.

Readonly State

Setting the readonly property will disable all interactions with the number input component, except being able to focus the number input.

Clearable Variant

If you need to be able to quickly clear the value of a number input, you can add the clearable property to the number input component.

Prefix and Suffix

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

Prepend and Append

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

Color Variants

You can use the color property to set a light or dark color for your number inputs.

Size Variants

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




Design Tokens