Input

Form component used for inputting data directly from the keyboard.

Basic Example

Inputs are the simplest and most used type of form control. Inkline provides you with simple solutions for all the scenarios you will encounter when creating input forms.

Input Type

Behind the scenes, Inkline uses a native HTML <input> element, meaning that you can use the type property to define the type of the input, such as text, password, date, email, number, and so on. By default, the input type is set to text.

Keep in mind that native input types look and are treated differently in each browser, which is why you should use a custom component to achieve consistency.

HTML

<i-input v-model="value" type="text" placeholder="Enter some text.." />

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

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

<i-input v-model="value" type="email" placeholder="Enter an email.." />

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

Disabled State

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

Readonly State

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

Clearable Variant

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

Prefix and Suffix

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

HTML

<i-input v-model="value" placeholder="Type something..">
    <template #prefix>@</template>
</i-input>

<i-input v-model="value" placeholder="Type something..">
    <template #suffix>@</template>
</i-input>

<i-input v-model="value" placeholder="Type something..">
    <template #prefix>@</template>
    <template #suffix>@</template>
</i-input>

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.

https://

.com

https://

.com

HTML

<i-input v-model="value" placeholder="Type something..">
    <template #prepend>
        <span>https://</span>
    </template>
</i-input>

<i-input v-model="value" placeholder="Type something..">
    <template #append>
        <span>.com</span>
    </template>
</i-input>

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

HTML

<i-input v-model="value" placeholder="Type something..">
    <template #prepend>
        <i-button>Button</i-button>
    </template>
</i-input>

<i-input v-model="value" placeholder="Type something..">
    <template #append>
        <i-button>Button</i-button>
    </template>
</i-input>

<i-input v-model="value" placeholder="Type something..">
    <template #prepend>
        <i-button>Button</i-button>
    </template>
    <template #append>
        <i-button>Button</i-button>
    </template>
</i-input>

HTML

<i-input v-model="value" placeholder="Type something..">
    <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-input>

<i-input v-model="value" placeholder="Type something..">
    <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-input>

<i-input v-model="value" placeholder="Type something..">
    <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-input>

Colors

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

HTML

<i-input v-model="value" color="light" placeholder="Type something.." />

<i-input v-model="value" color="dark" placeholder="Type something.." />

Sizes

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.

HTML

<i-input v-model="value" size="sm" placeholder="Type something.." />

<i-input v-model="value" size="md" placeholder="Type something.." />

<i-input v-model="value" size="lg" placeholder="Type something.." />

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
error
TypeBoolean | Array
Default'touched', 'dirty', 'invalid'
Description The error state of the input, computed based on schema by default.
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
plaintext
TypeBoolean
Defaultfalse
Description Display the input as plaintext, disabling interaction
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
Default1
Description The tabindex of the input
Property
type
TypeString
Default'text'
Description The type of the input
Property
clearAriaLabel
TypeString
DefaultClear
Description The aria-label of the clear button

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
Property
clear
Description Event emitted when clearing the input element

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

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