Number Input
Number Inputs are form components used to for easily inputting and manipulating numbers.
Basic Example
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.
Precision
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.
Colors
You can use the color
property to set a light
or dark
color for your number inputs.
Sizes
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
.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
color
Type'light' | 'dark'
Default'light'
Description The color variant of the input - Property
clearable
TypeBoolean
Defaultfalse
Description Display the input as clearable - Property
disabled
TypeBoolean
Defaultfalse
Description The disabled state of the input - Property
id
TypeString
Default''
Description The id of the internal input element - Property
modelValue
TypeString | Number
Default''
Description Used to set the field value - Property
name
TypeString
Defaultuid()
Description The unique identifier of the input - Property
readonly
TypeBoolean
Defaultfalse
Description The readonly state of the input - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the input - Property
tabindex
TypeNumber | String
Default0
Description The tabindex of the input - Property
min
TypeNumber
Default-Infinity
Description The minimum allowed input value - Property
max
TypeNumber
Default+Infinity
Description The maximum allowed input value - Property
precision
TypeNumber
Default0
Description The precision of the input value, for floating point numbers - Property
step
TypeNumber
Default1
Description The increment step to increase or decrease the value by
Slots
Use slots to insert custom content into well-defined component locations.
- Property
prefix
Description Slot for the input prefix content - Property
suffix
Description Slot for the input suffix content - Property
prepend
Description Slot for the input prepend content - Property
append
Description Slot for the input append content - Property
clearable
Description Slot for the clearable button
Events
Use events to react to something happening inside the component.
- Property
update:modelValue
Description Event emitted for setting the modelValue
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component. Changing the CSS Variables of the Input Component will directly affect the design of the Number Input Component as well.
- Property
----background
Valuecolor('white')
Description The background of the input component - Property
----background--disabled
Valuecolor('light-25')
Description The background of the input component when disabled - Property
----border-color
Valuecolor('light-55')
Description The border color of the input component - Property
----border-color--hover
Valuecolor('light-60')
Description The border color of the input component when hovered - Property
----border-color--focus
Valuecolor('primary')
Description The border color of the input component when focused - Property
----border-style
Valuevar(--border-style)
Description The border style of the input component - Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the input component - Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the input component - Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the input component - Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the input component - Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the input component - Property
----border-top-left-radius
Valuevar(--border-top-left-radius)
Description The border top left radius of the input component - Property
----border-top-right-radius
Valuevar(--border-top-right-radius)
Description The border top right radius of the input component - Property
----border-bottom-right-radius
Valuevar(--border-bottom-right-radius)
Description The border bottom right radius of the input component - Property
----border-bottom-left-radius
Valuevar(--border-bottom-left-radius)
Description The border bottom left radius of the input component - Property
----border-radius
Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
Description The border radius of the input component - Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the input component - Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the input component - Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the input component - Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the input component - Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the input component - Property
----box-shadow
Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
Description The box shadow of the input component - Property
----color
Valuecontrast-color($color-white)
Description The color of the input component - Property
----color--disabled
Valuecolor('light-75')
Description The color of the input component when disabled - Property
----font-size
Valuefont-size()
Description The font size of the input component - Property
----line-height
Valuevar(--line-height)
Description The line height of the input component - Property
----padding-top
Valuecalc(var(--padding-top) / 2)
Description The padding top of the input component - Property
----padding-right
Valuevar(--padding-right)
Description The padding right of the input component - Property
----padding-bottom
Valuecalc(var(--padding-bottom) / 2)
Description The padding bottom of the input component - Property
----padding-left
Valuevar(--padding-left)
Description The padding left of the input component - Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the input component - Property
----clear--background
Valuetransparent
Description The background of the input component clear button - Property
----clear--background--hover
Valuecolor('light-30')
Description The background of the input component clear button - Property
----clear--background--active
Valuecolor('light-40')
Description The background of the input component clear button - Property
----clear--color
Valuecolor('light-70')
Description The color of the input component clear button - Property
----clear--size
Value1.2rem
Description The size of the input component clear button - Property
----placeholder--color
Valuecolor('light-60')
Description The color of the input component placeholder - Property
----prefix--border-width
Valuevar(----border-right-width)
Description The border width of the input component prefix - Property
----suffix--border-width
Valuevar(----border-left-width)
Description The border width of the input component suffix - Property
----prefix-suffix--border-style
Valuevar(--border-style)
Description The border style of the input component prefix and suffix - Property
----prefix-suffix--color
Valuecolor('light-70')
Description The color of the input component prefix and suffix - Property
----prefix-suffix--padding-right
Valuevar(----padding-right)
Description The padding right of the input component prefix and suffix - Property
----prefix-suffix--padding-left
Valuevar(----padding-left)
Description The padding left of the input component prefix and suffix - Property
----prepend-append--background
Valuecolor('light')
Description The background of the input component prepend and append