Input

The Input component is a form element that is used to collect a single line of information.

Usage

To use an input, label as needed and add v-model for automatic data binding.

See the Form Field docs for more information about labeling, descriptions, placeholders, error state, success state and more.

<template>
  <ci-input
    sublabel="My Input"
    placeholder="Placeholder"
    v-model="myInput"
  />
</template>

<script>
export default {
  data() {
    return {
      myInput: ''
    }
  }
}
</script>

Prefix

Use the prefix prop to add a short prefix string to your Input.

<template>
  <ci-input
    label="Label"
    description="Some meaningful description here"
    sublabel="Sublabel"
    placeholder="Placeholder"
    prefix="#"
  />
</template>

Suffix

Use the suffix prop to add a short suffix string to your Input.

<template>
  <ci-input
    label="Label"
    description="Some meaningful description here"
    sublabel="Sublabel"
    placeholder="Placeholder"
    suffix="%"
  />
</template>

Icons

Use the icon prop to add an icon to your Input. Accepts valid values for the Icon Component.

<template>
  <ci-input
    label="Label"
    description="Some meaningful description here"
    sublabel="Sublabel"
    placeholder="Placeholder"
    icon="magnifying-glass"
  />
</template>

Loading spinner

Use the loading boolean prop to show loader in place of the icon. It takes precedence over icon, meaning when used together, the icon will only show when loading is false.

<template>
  <ci-input
    label="Label"
    description="Some meaningful description here"
    sublabel="Sublabel"
    placeholder="Placeholder"
    icon="magnifying-glass"
    :loading="true"
  />
</template>

Auto-advance

When auto-advance boolean prop set to true - hitting "Enter" will set cursor to next input item

<template>
  <div>
    <ci-input
      label="Label"
      placeholder="Placeholder"
      auto-advance
    />

    <ci-input
      label="Label"
      placeholder="Placeholder"
      auto-advance
    />
  </div>
</template>

Events

Event	Args	Emitted when...
@input	input value	Keystroke

Input HTML Attributes

Inputs are compatible with the standard html attributes (opens new window).