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.
There are following components included:
ListInput
- list item input elementName | 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 |
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 |
Name | Type | Description |
---|---|---|
blur | function(e) |
|
change | function(e) |
|
clear | function(e) |
|
focus | function(e) |
|
input | function(e) |
|
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) |
<template><k-page><k-navbar title="Form Inputs" /><k-block-title>Full Layout / Inline Labels</k-block-title><k-list :hairlines="hairlines"><k-list-inputlabel="Name"inline-labeltype="text"placeholder="Your name"><template #media><demo-icon /></template></k-list-input><k-list-inputlabel="Password"inline-labeltype="password"placeholder="Your password"><template #media><demo-icon /></template></k-list-input><k-list-inputlabel="E-mail"inline-labeltype="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-inputlabel="Phone"inline-labeltype="tel"placeholder="Your phone number"><template #media><demo-icon /></template></k-list-input><k-list-inputlabel="Gender"inline-labeltype="select"dropdowndefault-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-inputlabel="Birthday"inline-labeltype="date"default-value="2014-04-30"placeholder="Please choose..."><template #media><demo-icon /></template></k-list-input><k-list-inputlabel="Date time"inline-labeltype="datetime-local"placeholder="Please choose..."><template #media><demo-icon /></template></k-list-input><k-list-inputlabel="Textarea"inline-labeltype="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-inputlabel="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-inputlabel="Gender"type="select"dropdowndefault-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-inputlabel="Birthday"type="date"default-value="2014-04-30"placeholder="Please choose..."><template #media><demo-icon /></template></k-list-input><k-list-inputlabel="Date time"type="datetime-local"placeholder="Please choose..."><template #media><demo-icon /></template></k-list-input><k-list-inputlabel="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-inputlabel="Name"floating-labeltype="text"placeholder="Your name"><template #media><demo-icon /></template></k-list-input><k-list-inputlabel="Password"floating-labeltype="password"placeholder="Your password"><template #media><demo-icon /></template></k-list-input><k-list-inputlabel="E-mail"floating-labeltype="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-inputlabel="Phone"floating-labeltype="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-inputlabel="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-inputlabel="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-inputlabel="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-inputtype="text"placeholder="Your name"info="Full name please"/><k-list-inputtype="password"placeholder="Your password"info="8 characters minimum"/><k-list-inputtype="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>