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.errorTextstring'text-red-500'

Input error color

colors.hairlineErrorstring'hairline-red-500'

Input errored hairline color

colors.hairlineFocusstring'hairline-primary'

Input hairline color

colors.labelFocusstring'text-primary'

Input text color

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

hairlinesbooleantrue

Renders outer hairlines (borders)

infostring

Content of the input "info"

inlineLabelbooleanfalse

Makes label inline

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

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>
<twm-page>
<twm-navbar title="Form Inputs" />
<twm-block-title>Full Layout / Inline Labels</twm-block-title>
<twm-list :hairlines="hairlines">
<twm-list-input
label="Name"
inline-label
type="text"
placeholder="Your name"
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input
label="Password"
inline-label
type="password"
placeholder="Your password"
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input
label="E-mail"
inline-label
type="email"
placeholder="Your e-mail"
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input label="URL" inline-label type="url" placeholder="URL">
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input
label="Phone"
inline-label
type="tel"
placeholder="Your phone number"
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-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>
</twm-list-input>
<twm-list-input
label="Birthday"
inline-label
type="date"
default-value="2014-04-30"
placeholder="Please choose..."
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input
label="Date time"
inline-label
type="datetime-local"
placeholder="Please choose..."
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input
label="Textarea"
inline-label
type="textarea"
placeholder="Bio"
input-class="h-20 resize-none"
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
</twm-list>
<twm-block-title>Full Layout / Stacked Labels</twm-block-title>
<twm-list :hairlines="hairlines">
<twm-list-input label="Name" type="text" placeholder="Your name">
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input
label="Password"
type="password"
placeholder="Your password"
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input label="E-mail" type="email" placeholder="Your e-mail">
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input label="URL" type="url" placeholder="URL">
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input label="Phone" type="tel" placeholder="Your phone number">
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-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>
</twm-list-input>
<twm-list-input
label="Birthday"
type="date"
default-value="2014-04-30"
placeholder="Please choose..."
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input
label="Date time"
type="datetime-local"
placeholder="Please choose..."
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input
label="Textarea"
type="textarea"
placeholder="Bio"
input-class="h-20 resize-none"
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
</twm-list>
<twm-block-title>Floating Labels</twm-block-title>
<twm-list :hairlines="hairlines">
<twm-list-input
label="Name"
floating-label
type="text"
placeholder="Your name"
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input
label="Password"
floating-label
type="password"
placeholder="Your password"
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input
label="E-mail"
floating-label
type="email"
placeholder="Your e-mail"
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input label="URL" floating-label type="url" placeholder="URL">
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input
label="Phone"
floating-label
type="tel"
placeholder="Your phone number"
>
<template #media>
<demo-icon />
</template>
</twm-list-input>
</twm-list>
<twm-block-title>Validation + Additional Info</twm-block-title>
<twm-list :hairlines="hairlines">
<twm-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>
</twm-list-input>
</twm-list>
<twm-block-title>Clear Button</twm-block-title>
<twm-list :hairlines="hairlines">
<twm-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>
</twm-list-input>
</twm-list>
<twm-block-title>Icon + Input</twm-block-title>
<twm-list :hairlines="hairlines">
<twm-list-input type="text" placeholder="Your name">
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input type="password" placeholder="Your password">
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input type="email" placeholder="Your e-mail">
<template #media>
<demo-icon />
</template>
</twm-list-input>
<twm-list-input type="url" placeholder="URL">
<template #media>
<demo-icon />
</template>
</twm-list-input>
</twm-list>
<twm-block-title>Label + Input</twm-block-title>
<twm-list :hairlines="hairlines">
<twm-list-input label="Name" type="text" placeholder="Your name" />
<twm-list-input
label="Password"
type="password"
placeholder="Your password"
/>
<twm-list-input label="E-mail" type="email" placeholder="Your e-mail" />
<twm-list-input label="URL" type="url" placeholder="URL" />
</twm-list>
<twm-block-title>Only Inputs</twm-block-title>
<twm-list :hairlines="hairlines">
<twm-list-input type="text" placeholder="Your name" />
<twm-list-input type="password" placeholder="Your password" />
<twm-list-input type="email" placeholder="Your e-mail" />
<twm-list-input type="url" placeholder="URL" />
</twm-list>
<twm-block-title>Inputs + Additional Info</twm-block-title>
<twm-list :hairlines="hairlines">
<twm-list-input
type="text"
placeholder="Your name"
info="Full name please"
/>
<twm-list-input
type="password"
placeholder="Your password"
info="8 characters minimum"
/>
<twm-list-input
type="email"
placeholder="Your e-mail"
info="Your work e-mail address"
/>
<twm-list-input type="url" placeholder="URL" info="Your website URL" />
</twm-list>
<twm-block-title>Only Inputs Inset</twm-block-title>
<twm-list inset>
<twm-list-input type="text" placeholder="Your name" />
<twm-list-input type="password" placeholder="Your password" />
<twm-list-input type="email" placeholder="Your e-mail" />
<twm-list-input type="url" placeholder="URL" />
</twm-list>
</twm-page>
</template>
<script>
import { ref, computed } from 'vue';
import {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmBlockTitle,
twmList,
twmListInput,
useTheme,
} from 'tailwind-mobile/vue';
import DemoIcon from '../components/DemoIcon.vue';
export default {
components: {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmBlockTitle,
twmList,
twmListInput,
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>
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.