List Input Vue Component

List Input Components
ListInput Props
ListInput Events
ListInput Slots
Examples

Form elements allow you to create flexible and beautiful Form layout. Form elements are just well known List View (List and List Item Vue components) but with few additional components.

List Input Components

There are following components included:

ListInput - list item input element

ListInput Props

Name	Type	Default	Description
accept	string \| number		Value of input's native "accept" attribute
autocapitalize	string		Value of input's native "autocapitalize" attribute
autocomplete	string		Value of input's native "autoComplete" attribute
autocorrect	string		Value of input's native "autocorrect" attribute
autofocus	boolean		Value of input's native "autofocus" attribute
autosave	string		Value of input's native "autosave" attribute
clearButton	boolean	false	Adds input clear button
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	''
colors.bgMaterial	string	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.errorBorder	string	'border-red-500'
colors.errorText	string	'text-red-500'
colors.labelTextFocusIos	string	''
colors.labelTextFocusMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.labelTextIos	string	''
colors.labelTextMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.outlineBorderFocusIos	string	'border-primary'
colors.outlineBorderFocusMaterial	string	'border-md-light-primary dark:border-md-dark-primary'
colors.outlineBorderIos	string	'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.outlineBorderMaterial	string	'border-md-light-on-surface dark:border-md-dark-on-surface'
colors.outlineLabelBgIos	string	'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.outlineLabelBgMaterial	string	'bg-md-light-surface dark:bg-md-dark-surface'
component	string	'li'	Component's HTML Element
disabled	boolean		Marks input as disabled
dropdown	boolean	false	Renders additional dropdown icon (useful to use with `select` inputs)
error	string		Content of the input "error"
floatingLabel	boolean	false	Makes floating label
info	string		Content of the input "info"
inputClass	string		Additional input styles
inputId	string		Input id attribute
inputmode	string		Value of input's native "inputmode" attribute
inputStyle	CSSProperties		Additional input classes
label	string		Label content
max	string \| number		Value of input's native "max" attribute
maxlength	string \| number		Value of input's native "maxlength" attribute
min	string \| number		Value of input's native "min" attribute
minlength	string \| number		Value of input's native "minlength" attribute
multiple	boolean		Value of input's native "multiple" attribute
name	string		Input name
outline	boolean	undefined	Renders outline-style input (with border around), overwrites `outlineIos` and `outlineMaterial`
outlineIos	boolean	false	Renders outline-style input (with border around) in iOS theme
outlineMaterial	boolean	false	Renders outline-style input (with border around) in Material theme
pattern	string		Value of input's native "pattern" attribute
placeholder	string \| number		Input placeholder
readonly	boolean		Marks input as readonly
required	boolean		Marks input as required
size	string \| number		Value of input's native "size" attribute
spellcheck	string		Value of input's native "spellcheck" attribute
step	string \| number		Value of input's native "step" attribute
tabindex	string \| number		Value of input's native "tabindex" attribute
type	string	'text'	Input type
value	any		Input value

ListInput Events

Name	Type	Description
blur	function(e)	`blur` event handler
change	function(e)	`change` event handler
clear	function(e)	`clear` event handler
focus	function(e)	`focus` event handler
input	function(e)	`input` event handler

ListInput Slots

Name	Description
error	Content of the input "error"
info	Content of the input "info"
input	Custom input element
label	Label content
media	Content of the list item "media" area (e.g. icon)

Examples

FormInputs.vue

<template>
  <k-page>
    <k-navbar title="Form Inputs" />

    <k-block-title>Default</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input label="Name" type="text" placeholder="Your name">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        label="Password"
        type="password"
        placeholder="Your password"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input label="E-mail" type="email" placeholder="Your e-mail">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input label="URL" type="url" placeholder="URL">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input label="Phone" type="tel" placeholder="Your phone number">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        label="Gender"
        type="select"
        dropdown
        default-value="Male"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </k-list-input>

      <k-list-input
        label="Birthday"
        type="date"
        default-value="2014-04-30"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        label="Date time"
        type="datetime-local"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        label="Textarea"
        type="textarea"
        placeholder="Bio"
        input-class="!h-20 resize-none"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>

    <k-block-title>Outline</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input outline label="Name" type="text" placeholder="Your name">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        outline
        label="Password"
        type="password"
        placeholder="Your password"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        outline
        label="E-mail"
        type="email"
        placeholder="Your e-mail"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input outline label="URL" type="url" placeholder="URL">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        outline
        label="Phone"
        type="tel"
        placeholder="Your phone number"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        outline
        label="Gender"
        type="select"
        dropdown
        default-value="Male"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </k-list-input>

      <k-list-input
        outline
        label="Birthday"
        type="date"
        default-value="2014-04-30"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        outline
        label="Date time"
        type="datetime-local"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        outline
        label="Textarea"
        type="textarea"
        placeholder="Bio"
        input-class="!h-20 resize-none"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>

    <k-block-title>Floating Labels</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input
        label="Name"
        floating-label
        type="text"
        placeholder="Your name"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        label="Password"
        floating-label
        type="password"
        placeholder="Your password"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        label="E-mail"
        floating-label
        type="email"
        placeholder="Your e-mail"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input label="URL" floating-label type="url" placeholder="URL">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        label="Phone"
        floating-label
        type="tel"
        placeholder="Your phone number"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>

    <k-block-title>Outline + Floating Labels</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input
        outline
        label="Name"
        floating-label
        type="text"
        placeholder="Your name"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        outline
        label="Password"
        floating-label
        type="password"
        placeholder="Your password"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        outline
        label="E-mail"
        floating-label
        type="email"
        placeholder="Your e-mail"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        outline
        label="URL"
        floating-label
        type="url"
        placeholder="URL"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input
        outline
        label="Phone"
        floating-label
        type="tel"
        placeholder="Your phone number"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>

    <k-block-title>Validation + Additional Info</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input
        label="Name"
        type="text"
        placeholder="Your name"
        info="Basic string checking"
        :value="name.value"
        :error="
          name.changed && !name.value.trim() ? 'Please specify your name' : ''
        "
        @input="onNameChange"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>

    <k-block-title>Clear Button</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input
        label="TV Show"
        type="text"
        placeholder="Your favorite TV show"
        info="Type something to see clear button"
        :value="demoValue"
        :clear-button="demoValue.length > 0"
        @input="onDemoValueChange"
        @clear="onDemoValueClear"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>

    <k-block-title>Icon + Input</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input type="text" placeholder="Your name">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input type="password" placeholder="Your password">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input type="email" placeholder="Your e-mail">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

      <k-list-input type="url" placeholder="URL">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>

    <k-block-title>Label + Input</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input label="Name" type="text" placeholder="Your name" />

      <k-list-input
        label="Password"
        type="password"
        placeholder="Your password"
      />

      <k-list-input label="E-mail" type="email" placeholder="Your e-mail" />

      <k-list-input label="URL" type="url" placeholder="URL" />
    </k-list>

    <k-block-title>Only Inputs</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input type="text" placeholder="Your name" />

      <k-list-input type="password" placeholder="Your password" />

      <k-list-input type="email" placeholder="Your e-mail" />

      <k-list-input type="url" placeholder="URL" />
    </k-list>

    <k-block-title>Inputs + Additional Info</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input
        type="text"
        placeholder="Your name"
        info="Full name please"
      />

      <k-list-input
        type="password"
        placeholder="Your password"
        info="8 characters minimum"
      />

      <k-list-input
        type="email"
        placeholder="Your e-mail"
        info="Your work e-mail address"
      />

      <k-list-input type="url" placeholder="URL" info="Your website URL" />
    </k-list>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlockTitle,
    kList,
    kListInput,
  } from 'konsta/vue';
  import DemoIcon from '../components/DemoIcon.vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlockTitle,
      kList,
      kListInput,
      DemoIcon,
    },
    setup() {
      const name = ref({ value: '', changed: false });
      const demoValue = ref('');

      const onNameChange = (e) => {
        name.value = { value: e.target.value, changed: true };
      };
      const onDemoValueChange = (e) => {
        demoValue.value = e.target.value;
      };
      const onDemoValueClear = () => {
        demoValue.value = '';
      };

      return {
        name,
        demoValue,
        onNameChange,
        onDemoValueChange,
        onDemoValueClear,
      };
    },
  };
</script>