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.

<i-number-input v-model="value" placeholder="Enter a number.." />

Minimum and Maximum Value

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

<i-number-input v-model="value" :min="1" :max="10" placeholder="Enter a number.." />

Precision

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

<i-number-input v-model="value" :precision="2" placeholder="Enter a number.." />

Step Size

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

<i-number-input v-model="value" :step="10" placeholder="Enter a number.." />

Disabled State

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

<i-number-input v-model="value" disabled placeholder="Enter a number.." />

Readonly State

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

<i-number-input v-model="value" readonly placeholder="Enter a number.." />

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.

<i-number-input v-model="value" clearable placeholder="Enter a number.." />

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.

@
@
@@
<i-number-input v-model="value" placeholder="Enter a number..">
    <template #prefix>@</template>
</i-number-input>

<i-number-input v-model="value" placeholder="Enter a number..">
    <template #suffix>@</template>
</i-number-input>

<i-number-input v-model="value" placeholder="Enter a number..">
    <template #prefix>@</template>
    <template #suffix>@</template>
</i-number-input>

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.

https://
.com
https://
.com
<i-number-input v-model="value" placeholder="Enter a number..">
    <template #prepend>
        <span>https://</span>
    </template>
</i-number-input>

<i-number-input v-model="value" placeholder="Enter a number..">
    <template #append>
        <span>.com</span>
    </template>
</i-number-input>

<i-number-input v-model="value" placeholder="Enter a number..">
    <template #prepend>
        <span>https://</span>
    </template>
    <template #append>
        <span>.com</span>
    </template>
</i-number-input>


<i-number-input v-model="value" placeholder="Enter a number..">
    <template #prepend>
        <i-button>Button</i-button>
    </template>
</i-number-input>

<i-number-input v-model="value" placeholder="Enter a number..">
    <template #append>
        <i-button>Button</i-button>
    </template>
</i-number-input>

<i-number-input v-model="value" placeholder="Enter a number..">
    <template #prepend>
        <i-button>Button</i-button>
    </template>
    <template #append>
        <i-button>Button</i-button>
    </template>
</i-number-input>


<i-number-input v-model="value" placeholder="Enter a number..">
    <template #prepend>
        <i-dropdown>
            <i-button>Dropdown</i-button>
            <template #body>
                <i-dropdown-item>Action</i-dropdown-item>
                <i-dropdown-item>Another action</i-dropdown-item>
                <i-dropdown-item disabled>Disabled action</i-dropdown-item>
                <i-dropdown-divider />
                <i-dropdown-item>Separated item</i-dropdown-item>
            </template>
        </i-dropdown>
    </template>
</i-number-input>

<i-number-input v-model="value" placeholder="Enter a number..">
    <template #append>
        <i-dropdown>
            <i-button>Dropdown</i-button>
            <template #body>
                <i-dropdown-item>Action</i-dropdown-item>
                <i-dropdown-item>Another action</i-dropdown-item>
                <i-dropdown-item disabled>Disabled action</i-dropdown-item>
                <i-dropdown-divider />
                <i-dropdown-item>Separated item</i-dropdown-item>
            </template>
        </i-dropdown>
    </template>
</i-number-input>

<i-number-input v-model="value" placeholder="Enter a number..">
    <template #prepend>
        <i-dropdown>
            <i-button>Dropdown</i-button>
            <template #body>
                <i-dropdown-item>Action</i-dropdown-item>
                <i-dropdown-item>Another action</i-dropdown-item>
                <i-dropdown-item disabled>Disabled action</i-dropdown-item>
                <i-dropdown-divider />
                <i-dropdown-item>Separated item</i-dropdown-item>
            </template>
        </i-dropdown>
    </template>
    <template #append>
        <i-dropdown>
            <i-button>Dropdown</i-button>
            <template #body>
                <i-dropdown-item>Action</i-dropdown-item>
                <i-dropdown-item>Another action</i-dropdown-item>
                <i-dropdown-item disabled>Disabled action</i-dropdown-item>
                <i-dropdown-divider />
                <i-dropdown-item>Separated item</i-dropdown-item>
            </template>
        </i-dropdown>
    </template>
</i-number-input>

Colors

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

<i-number-input v-model="value" color="light" placeholder="Enter a number.." />

<i-number-input v-model="value" color="dark" placeholder="Enter a number.." />

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.

<i-number-input v-model="value" size="sm" placeholder="Enter a number.." />

<i-number-input v-model="value" size="md" placeholder="Enter a number.." />

<i-number-input v-model="value" size="lg" placeholder="Enter a number.." />

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