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.errorText	string	'text-red-500'	Input error color
colors.hairlineError	string	'hairline-red-500'	Input errored hairline color
colors.hairlineFocus	string	'hairline-primary'	Input hairline color
colors.labelFocus	string	'text-primary'	Input text color
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
hairlines	boolean	true	Renders outer hairlines (borders)
info	string		Content of the input "info"
inlineLabel	boolean	false	Makes label inline
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
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>Full Layout / Inline Labels</k-block-title>
    <k-list :hairlines="hairlines">
      <k-list-input
        label="Name"
        inline-label
        type="text"
        placeholder="Your name"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

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

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

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

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

      <k-list-input
        label="Gender"
        inline-label
        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"
        inline-label
        type="date"
        default-value="2014-04-30"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>

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

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

    <k-block-title>Full Layout / Stacked Labels</k-block-title>
    <k-list :hairlines="hairlines">
      <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>Floating Labels</k-block-title>
    <k-list :hairlines="hairlines">
      <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>Validation + Additional Info</k-block-title>
    <k-list :hairlines="hairlines">
      <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 :hairlines="hairlines">
      <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 :hairlines="hairlines">
      <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 :hairlines="hairlines">
      <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 :hairlines="hairlines">
      <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 :hairlines="hairlines">
      <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-block-title>Only Inputs Inset</k-block-title>
    <k-list inset>
      <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-page>
</template>
<script>
  import { ref, computed } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlockTitle,
    kList,
    kListInput,
    useTheme,
  } 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 theme = useTheme();
      const hairlines = computed(() => theme.value !== 'material');

      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,
        theme,
        hairlines,
        onNameChange,
        onDemoValueChange,
        onDemoValueClear,
      };
    },
  };
</script>