🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

List Input Vue Component

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

NameTypeDefaultDescription
acceptstring | number

Value of input's native "accept" attribute

autocapitalizestring

Value of input's native "autocapitalize" attribute

autocompletestring

Value of input's native "autoComplete" attribute

autocorrectstring

Value of input's native "autocorrect" attribute

autofocusboolean

Value of input's native "autofocus" attribute

autosavestring

Value of input's native "autosave" attribute

clearButtonbooleanfalse

Adds input clear button

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring''
colors.bgMaterialstring'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.errorBorderstring'border-red-500'
colors.errorTextstring'text-red-500'
colors.labelTextFocusIosstring''
colors.labelTextFocusMaterialstring'text-md-light-primary dark:text-md-dark-primary'
colors.labelTextIosstring''
colors.labelTextMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.outlineBorderFocusIosstring'border-primary'
colors.outlineBorderFocusMaterialstring'border-md-light-primary dark:border-md-dark-primary'
colors.outlineBorderIosstring'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.outlineBorderMaterialstring'border-md-light-on-surface dark:border-md-dark-on-surface'
colors.outlineLabelBgIosstring'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.outlineLabelBgMaterialstring'bg-md-light-surface dark:bg-md-dark-surface'
componentstring'li'

Component's HTML Element

disabledboolean

Marks input as disabled

dropdownbooleanfalse

Renders additional dropdown icon (useful to use with select inputs)

errorstring

Content of the input "error"

floatingLabelbooleanfalse

Makes floating label

infostring

Content of the input "info"

inputClassstring

Additional input styles

inputIdstring

Input id attribute

inputmodestring

Value of input's native "inputmode" attribute

inputStyleCSSProperties

Additional input classes

labelstring

Label content

maxstring | number

Value of input's native "max" attribute

maxlengthstring | number

Value of input's native "maxlength" attribute

minstring | number

Value of input's native "min" attribute

minlengthstring | number

Value of input's native "minlength" attribute

multipleboolean

Value of input's native "multiple" attribute

namestring

Input name

outlinebooleanundefined

Renders outline-style input (with border around), overwrites outlineIos and outlineMaterial

outlineIosbooleanfalse

Renders outline-style input (with border around) in iOS theme

outlineMaterialbooleanfalse

Renders outline-style input (with border around) in Material theme

patternstring

Value of input's native "pattern" attribute

placeholderstring | number

Input placeholder

readonlyboolean

Marks input as readonly

requiredboolean

Marks input as required

sizestring | number

Value of input's native "size" attribute

spellcheckstring

Value of input's native "spellcheck" attribute

stepstring | number

Value of input's native "step" attribute

tabindexstring | number

Value of input's native "tabindex" attribute

typestring'text'

Input type

valueany

Input value

ListInput Events

NameTypeDescription
blurfunction(e)

blur event handler

changefunction(e)

change event handler

clearfunction(e)

clear event handler

focusfunction(e)

focus event handler

inputfunction(e)

input event handler

ListInput Slots

NameDescription
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>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.