Input

Form component used for inputting data directly from the keyboard.

Example

Input

Disabled State

Disabled Input

Clearable Input

Input

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.

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.

Input Text Prepend and Append
http://
http://
http://
.com
Input Button Prepend and Append
Input Button Prepend and Append

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.

Input Sizes

Types

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, and so on.

Input Type

API

Input API <i-input>
Property Description Type Accepted Default
clearable Sets the input as clearable. Clearable inputs have a clear icon when value a is provided. Boolean true, false false
disabled Sets the state of the input form component as disabled. Boolean true, false false
placeholder Sets the placeholder of the input form component. String
readonly Sets the state of the input form component as readonly. Boolean true, false false
schema Provides a schema binding to the input form component. See the Form Validation documentation. Object
size Sets the size of the input form component. String sm, md, lg md
type Sets the type of the input form component. String text, password text
value Sets the value of the input form component. To be provided using the v-model directive. String