Input

Form component used for inputting data directly from the keyboard.

Example

Input

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

export default {
  data () {
    return {
      value: ''
    };
  }
}

Value:

Disabled State

Disabled Input

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

export default {
  data () {
    return {
      value: ''
    };
  }
}

Readonly State

Readonly Input

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

export default {
  data () {
    return {
      value: ''
    };
  }
}

Clearable Input

Input

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

export default {
  data () {
    return {
      value: ''
    };
  }
}

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

@ @

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

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

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

export default {
  data () {
    return {
      value: ''
    };
  }
}

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://

.com

<i-input v-model="value" placeholder="Type something..">
    <span slot="prepend">http://</span>
</i-input>

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

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

export default {
  data () {
    return {
      value: ''
    };
  }
}

Input Button Prepend and Append

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

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

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

export default {
  data () {
    return {
      value: ''
    };
  }
}

Input Button Prepend and Append

Action Another action Something disabled here

Separated item

Action Another action Something disabled here

Separated item

Action Another action Something disabled here

Separated item

Action Another action Something disabled here

Separated item

<i-input v-model="value" placeholder="Type something..">
    <i-dropdown slot="prepend">
        <i-button>Dropdown</i-button>
        <i-dropdown-menu>
            <i-dropdown-item href>Action</i-dropdown-item>
            <i-dropdown-item href>Another action</i-dropdown-item>
            <i-dropdown-item href disabled>Something disabled here</i-dropdown-item>
            <i-dropdown-divider />
            <i-dropdown-item>Separated item</i-dropdown-item>
        </i-dropdown-menu>
    </i-dropdown>
</i-input>

<i-input v-model="value" placeholder="Type something..">
    <i-dropdown slot="append">
        <i-button>Dropdown</i-button>
        <i-dropdown-menu>
            <i-dropdown-item href>Action</i-dropdown-item>
            <i-dropdown-item href>Another action</i-dropdown-item>
            <i-dropdown-item href disabled>Something disabled here</i-dropdown-item>
            <i-dropdown-divider />
            <i-dropdown-item>Separated item</i-dropdown-item>
        </i-dropdown-menu>
    </i-dropdown>
</i-input>

<i-input v-model="value" placeholder="Type something..">
    <i-dropdown slot="prepend">
        <i-button>Dropdown</i-button>
        <i-dropdown-menu>
            <i-dropdown-item href>Action</i-dropdown-item>
            <i-dropdown-item href>Another action</i-dropdown-item>
            <i-dropdown-item href disabled>Something disabled here</i-dropdown-item>
            <i-dropdown-divider />
            <i-dropdown-item>Separated item</i-dropdown-item>
        </i-dropdown-menu>
    </i-dropdown>
    <i-dropdown slot="append">
        <i-button>Dropdown</i-button>
        <i-dropdown-menu>
            <i-dropdown-item href>Action</i-dropdown-item>
            <i-dropdown-item href>Another action</i-dropdown-item>
            <i-dropdown-item href disabled>Something disabled here</i-dropdown-item>
            <i-dropdown-divider />
            <i-dropdown-item>Separated item</i-dropdown-item>
        </i-dropdown-menu>
    </i-dropdown>
</i-input>

export default {
  data () {
    return {
      value: ''
    };
  }
}

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

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

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

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

export default {
  data () {
    return {
      value: ''
    };
  }
}

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

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

export default {
  data () {
    return {
      value: ''
    };
  }
}

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.

Slot prepend

Description Slot for input prepend content. Prepended content appears before the input inside a button-like container.

Slot append

Description Slot for input append content. Appended content appears after the input inside a button-like container.

Slot prefix

Description Slot for input prefix content. The prefix content appears inside the input field, on the left side.

Slot suffix

Description Slot for input suffix content. The suffix content appears inside the input field, on the right side.

Event click

Type (event: Event) => {}

Description Emitted when input form component is clicked.

Event focus

Type (event: Event) => {}

Description Emitted when input form component is focused.

Event blur

Type (event: Event) => {}

Description Emitted when input form component is blurred.

Event change

Type (value: String) => {}

Description Emitted when input form component value changes.

Event input

Type (value: String) => {}

Description Emitted when input form component value changes.

Event mouseenter

Type (value: String) => {}

Description Emitted when input form component is hovered.

Event mouseleave

Type (value: String) => {}

Description Emitted when input form component is not hovered anymore.

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;
}