Kongponents

# Input

KInput provides a wrapper around general text input's and provides specific Kong styling and state treatments (error, focus, etc).

<KInput class="w-100"/>

# Props

# label

String to be used as the input label.

<KInput label="Name" placeholder="I'm labelled!" class="mb-2" />
<KInput label="Disabled" disabled placeholder="I'm disabled!" />

If the label is omitted it can be handled with another component, like KLabel. This is meant to be used before KInput and will be styled appropriately.

<template>
  <KLabel for="my-input">Label</KLabel>
  <KInput id="my-input" type="text" placeholder="I have a label" />
</template>

# labelAttributes

Use the labelAttributes prop to configure the KLabel's props if using the label prop.

<KInput
  label="Name"
  :label-attributes="{
    help: 'I use the KLabel `help` prop'
  }"
/>

# overlayLabel

Enable this prop to overlay the label on the input element's border. Defaults to false. Make sure that if you are using the built in label you specify the --KInputBackground theming variable. This variable is used for the background of the label as well as the input element.

<KInput label="Name" placeholder="I'm labelled!" :overlay-label="true" />
<KInput label="Disabled" disabled placeholder="I'm disabled!" :overlay-label="true" />

# size

You can specify small, medium (default), or large for the size.

<KInput label="Small" size="small" class="mb-2" />
<KInput label="Medium" class="mb-2" />
<KInput label="Large" size="large" />

# help

String to be displayed as help text.

I can help with that 

<KInput help="I can help with that" placeholder="Need help?" />

You also have the option of using the .help utility class. This is meant to be used after KInput and will be styled appropriately.

I can help with that

<template>
  <KInput type="text" placeholder="Need help?" />
  <p class="help">I can help with that</p>
</template>

# hasError

Boolean value to indicate whether the element has an error and should apply error styling. By default this is false.

# errorMessage

String to be displayed as error message if hasError prop is true.

Service name should not contain “_” 

<KInput class="w-100"
  hasError
  errorMessage="Service name should not contain “_”"
/>

Service name should not contain “_”

Service name should not contain “_”

Service name should not contain “_” 

<KInput
  label="Small" size="small" class="mb-2"
  hasError
  errorMessage="Service name should not contain “_”"
/>
<KInput
  label="Medium"
  class="mb-2"
  hasError
  errorMessage="Service name should not contain “_”"
/>
<KInput
  label="Large"
  size="large"
  hasError
  errorMessage="Service name should not contain “_”"
/>

Service name should not contain “_”

Service name should not contain “_”

Service name should not contain “_” 

<KInput
  label="Small" size="small" class="mb-2"
  hasError
  errorMessage="Service name should not contain “_”"
  :overlay-label="true"
/>
<KInput
  label="Medium"
  class="mb-2"
  hasError
  errorMessage="Service name should not contain “_”"
  :overlay-label="true"
/>
<KInput
  label="Large"
  size="large"
  hasError
  errorMessage="Service name should not contain “_”"
  :overlay-label="true"
/>

# Attribute Binding

You can pass any input attribute and it will get properly bound to the element.

Note: Add the input-error class to add custom error styling

<KInput placeholder="placeholder" />
<KInput type="password" value="123" />
<KInput type="number" value="1"/>
<KInput type="email" value="john.doe@konghq.com"/>
<KInput disabled value="disabled"/>
<KInput read-only value="read-only"/>
<KInput type="search" value="search"/>
<KInput type="email" value="error" class="input-error"/>

# v-model

KInput works as regular inputs do using v-model for data binding:

hello 
<Komponent :data="{myInput: 'hello'}" v-slot="{ data }">
  {{ myInput }}
  <KInput v-model="data.myInput" />
</Komponent>

# Events

KInput transparently binds to events:

<Komponent :data="{myInput: 'hello'}" v-slot="{ data }">
  <div>
    <KInput
      v-model="data.myInput"
      @blur="e => (data.myInput = 'blurred')"
      @focus="e => (data.myInput = 'focused')"
    />
  </div>
</Komponent>

# Theming

Variable Purpose
--KInputColor Input text color
--KInputBorder Input border / label color
--KInputBackground Input and label background color
--KInputHover Input border / label hover color
--KInputFocus Input border / label focus color
--KInputDisabledBackground Input disabled background color
--KInputError Input error border color
--KInputPlaceholderColor Placeholder text color

An Example of changing the error border color of KInput to pink might look like:

<template>
  <KInput class="custom-input input-error" type="email" value="error" />
</template>

<style>
.custom-input {
  --KInputError: hotpink;
}
</style>

← Label →