Input

Form component used for inputting data directly from the keyboard.

Example

Input

Disabled State

Disabled Input

Readonly State

Readonly 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

Component API

Here you can find a list of the various customization options you can use for the input component as props, as well as available slots and events.

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

Sass Variables

Here you can find a list of the Sass variables you can use for the input components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

Input
Property $label-margin-bottom
Default 0.5rem
Property $input-line-height
Default $line-height
Property $input-padding-base
Default spacers('1/2') spacers('1')
Property $input-padding
Default size-map($input-padding-base, $sizes, $size-multipliers)
Property $input-prefix-padding-base
Default nth($input-padding-base, 2) * 4
Property $input-prefix-padding
Default size-map($input-prefix-padding-base, $sizes, $size-multipliers)
Property $input-prefix-border-width
Default 1px
Property $input-font-size
Default $font-size
Property $input-color-light
Default $body-color-light
Property $input-color-focus-light
Default $input-color-light
Property $input-color-disabled-light
Default $input-color-light
Property $input-placeholder-color-light
Default colors('gray-60')
Property $input-plaintext-color-light
Default $input-color-light
Property $input-background-light
Default $color-white
Property $input-background-disabled-light
Default colors('gray-20')
Property $input-background-focus-light
Default $input-background-light
Property $input-border-color-light
Default $border-color-light
Property $input-border-color-hover-light
Default darken-lightness($input-border-color-light, 10%)
Property $input-border-color-focus-light
Default $color-primary
Property $input-icon-circle-background-light
Default $color-light
Property $input-icon-circle-background-hover-light
Default $color-primary
Property $input-icon-circle-color-light
Default $color-dark
Property $input-icon-circle-color-hover-light
Default $input-icon-circle-color-light
Property $input-append-prepend-background-light
Default $color-light
Property $input-color-dark
Default $body-color-dark
Property $input-color-focus-dark
Default $input-color-dark
Property $input-color-disabled-dark
Default $input-color-dark
Property $input-placeholder-color-dark
Default colors('gray-40')
Property $input-plaintext-color-dark
Default $input-color-dark
Property $input-background-dark
Default darken($color-dark, 3%)
Property $input-background-disabled-dark
Default $color-gray-70
Property $input-background-focus-dark
Default $input-background-dark
Property $input-border-color-dark
Default $border-color-dark
Property $input-border-color-hover-dark
Default lighten-lightness($input-border-color-dark, 10%)
Property $input-border-color-focus-dark
Default $color-primary
Property $input-icon-circle-background-dark
Default $color-dark
Property $input-icon-circle-background-hover-dark
Default $color-primary
Property $input-icon-circle-color-dark
Default $color-white
Property $input-icon-circle-color-hover-dark
Default $input-icon-circle-color-dark
Property $input-append-prepend-background-dark
Default $color-dark
Property $input-border-width
Default $border-width
Property $input-border-radius
Default $border-radius
Property $input-box-shadow
Default inset 0 1px 1px rgba($color-black, 0.05)
Property $input-transition
Default background-color $transition-duration $transition-easing, color $transition-duration $transition-easing, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
Property $input-icon-circle-size
Default 1.2rem
Property $input-color-for-light-variant
Default $color-for-light-variant
Property $input-color-for-dark-variant
Default $color-for-dark-variant
Property $input-variant-{variant}
Default input-variant($color-{variant})
Property $input-variants
Default
(
    light: $input-variant-light,
    dark: $input-variant-dark
)
Function input-variant
Default
@function input-variant($variant) {
    $input-color: variant-color-by-luminance($variant, $input-color-for-light-variant, $input-color-for-dark-variant);
    $input-color-focus: $input-color;
    $input-color-disabled: $input-color;
    $input-plaintext-color: $input-color;
    $input-placeholder-color: variant-color-by-luminance($variant, $color-gray-60, $color-gray-40);
    $input-background: $variant;
    $input-background-focus: $input-background;
    $input-background-disabled: variant-color-by-luminance($variant, $color-gray-20, $color-gray-70);
    $input-border-color: variant-color-by-luminance($variant, $border-color-light, $border-color-dark);
    $input-border-color-hover: variant-color-by-luminance($variant, darken-lightness($input-border-color, 10%), lighten-lightness($input-border-color, 10%));
    $input-border-color-focus: $color-primary;
    $input-icon-circle-background: variant-color-by-luminance($variant, $color-light, $color-dark);
    $input-icon-circle-background-hover: $color-primary;
    $input-icon-circle-color: variant-color-by-luminance($variant, $input-color-for-dark-variant, $input-color-for-light-variant);
    $input-icon-circle-color-hover: $input-icon-circle-color;
    $input-append-prepend-background: variant-color-by-luminance($variant, $color-light, $color-dark);

    $variant-map: (
        'color': $input-color,
        'color-focus': $input-color-focus,
        'color-disabled': $input-color-disabled,
        'placeholder-color': $input-placeholder-color,
        'plaintext-color': $input-plaintext-color,
        'background': $input-background,
        'background-disabled': $input-background-disabled,
        'background-focus': $input-background-focus,
        'border-color': $input-border-color,
        'border-color-hover': $input-border-color-hover,
        'border-color-focus': $input-border-color-focus,
        'icon-circle-background': $input-icon-circle-background,
        'icon-circle-background-hover': $input-icon-circle-background-hover,
        'icon-circle-color': $input-icon-circle-color,
        'icon-circle-color-hover': $input-icon-circle-color-hover,
        'append-prepend-background': $input-append-prepend-background,
    );

    @return $variant-map;
}