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

List Input Svelte Component

Form elements allow you to create flexible and beautiful Form layout. Form elements are just well known List View (List and List Item Svelte 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

onBlurfunction(e)

blur event handler

onChangefunction(e)

change event handler

onClearfunction(e)

clear event handler

onFocusfunction(e)

focus event handler

onInputfunction(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.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
BlockTitle,
List,
ListInput,
} from 'konsta/svelte';
import DemoIcon from '../components/DemoIcon.svelte';
let name = { value: '', changed: false };
let demoValue = '';
const onNameChange = (e) => {
name = { value: e.target.value, changed: true };
};
const onDemoValueChange = (e) => {
demoValue = e.target.value;
};
const onDemoValueClear = () => {
demoValue = '';
};
</script>
<Page>
<Navbar title="Form Inputs" />
<BlockTitle>Default</BlockTitle>
<List strongIos insetIos>
<ListInput label="Name" type="text" placeholder="Your name">
<DemoIcon slot="media" />
</ListInput>
<ListInput label="Password" type="password" placeholder="Your password">
<DemoIcon slot="media" />
</ListInput>
<ListInput label="E-mail" type="email" placeholder="Your e-mail">
<DemoIcon slot="media" />
</ListInput>
<ListInput label="URL" type="url" placeholder="URL">
<DemoIcon slot="media" />
</ListInput>
<ListInput label="Phone" type="tel" placeholder="Your phone number">
<DemoIcon slot="media" />
</ListInput>
<ListInput
label="Gender"
type="select"
dropdown
defaultValue="Male"
placeholder="Please choose..."
>
<DemoIcon slot="media" />
<option value="Male">Male</option>
<option value="Female">Female</option>
</ListInput>
<ListInput
label="Birthday"
type="date"
defaultValue="2014-04-30"
placeholder="Please choose..."
>
<DemoIcon slot="media" />
</ListInput>
<ListInput
label="Date time"
type="datetime-local"
placeholder="Please choose..."
>
<DemoIcon slot="media" />
</ListInput>
<ListInput
label="Textarea"
type="textarea"
placeholder="Bio"
inputClass="!h-20 resize-none"
>
<DemoIcon slot="media" />
</ListInput>
</List>
<BlockTitle>Outline</BlockTitle>
<List strongIos insetIos>
<ListInput outline label="Name" type="text" placeholder="Your name">
<DemoIcon slot="media" />
</ListInput>
<ListInput
outline
label="Password"
type="password"
placeholder="Your password"
>
<DemoIcon slot="media" />
</ListInput>
<ListInput outline label="E-mail" type="email" placeholder="Your e-mail">
<DemoIcon slot="media" />
</ListInput>
<ListInput outline label="URL" type="url" placeholder="URL">
<DemoIcon slot="media" />
</ListInput>
<ListInput outline label="Phone" type="tel" placeholder="Your phone number">
<DemoIcon slot="media" />
</ListInput>
<ListInput
outline
label="Gender"
type="select"
dropdown
defaultValue="Male"
placeholder="Please choose..."
>
<DemoIcon slot="media" />
<option value="Male">Male</option>
<option value="Female">Female</option>
</ListInput>
<ListInput
outline
label="Birthday"
type="date"
defaultValue="2014-04-30"
placeholder="Please choose..."
>
<DemoIcon slot="media" />
</ListInput>
<ListInput
outline
label="Date time"
type="datetime-local"
placeholder="Please choose..."
>
<DemoIcon slot="media" />
</ListInput>
<ListInput
outline
label="Textarea"
type="textarea"
placeholder="Bio"
inputClass="!h-20 resize-none"
>
<DemoIcon slot="media" />
</ListInput>
</List>
<BlockTitle>Floating Labels</BlockTitle>
<List strongIos insetIos>
<ListInput label="Name" floatingLabel type="text" placeholder="Your name">
<DemoIcon slot="media" />
</ListInput>
<ListInput
label="Password"
floatingLabel
type="password"
placeholder="Your password"
>
<DemoIcon slot="media" />
</ListInput>
<ListInput
label="E-mail"
floatingLabel
type="email"
placeholder="Your e-mail"
>
<DemoIcon slot="media" />
</ListInput>
<ListInput label="URL" floatingLabel type="url" placeholder="URL">
<DemoIcon slot="media" />
</ListInput>
<ListInput
label="Phone"
floatingLabel
type="tel"
placeholder="Your phone number"
>
<DemoIcon slot="media" />
</ListInput>
</List>
<BlockTitle>Outline + Floating Labels</BlockTitle>
<List strongIos insetIos>
<ListInput
outline
label="Name"
floatingLabel
type="text"
placeholder="Your name"
>
<DemoIcon slot="media" />
</ListInput>
<ListInput
outline
label="Password"
floatingLabel
type="password"
placeholder="Your password"
>
<DemoIcon slot="media" />
</ListInput>
<ListInput
outline
label="E-mail"
floatingLabel
type="email"
placeholder="Your e-mail"
>
<DemoIcon slot="media" />
</ListInput>
<ListInput outline label="URL" floatingLabel type="url" placeholder="URL">
<DemoIcon slot="media" />
</ListInput>
<ListInput
outline
label="Phone"
floatingLabel
type="tel"
placeholder="Your phone number"
>
<DemoIcon slot="media" />
</ListInput>
</List>
<BlockTitle>Validation + Additional Info</BlockTitle>
<List strongIos insetIos>
<ListInput
label="Name"
type="text"
placeholder="Your name"
info="Basic string checking"
value={name.value}
error={name.changed && !name.value.trim()
? 'Please specify your name'
: ''}
onInput={onNameChange}
>
<DemoIcon slot="media" />
</ListInput>
</List>
<BlockTitle>Clear Button</BlockTitle>
<List strongIos insetIos>
<ListInput
label="TV Show"
type="text"
placeholder="Your favorite TV show"
info="Type something to see clear button"
value={demoValue}
clearButton={demoValue.length > 0}
onInput={onDemoValueChange}
onClear={onDemoValueClear}
>
<DemoIcon slot="media" />
</ListInput>
</List>
<BlockTitle>Icon + Input</BlockTitle>
<List strongIos insetIos>
<ListInput type="text" placeholder="Your name">
<DemoIcon slot="media" />
</ListInput>
<ListInput type="password" placeholder="Your password">
<DemoIcon slot="media" />
</ListInput>
<ListInput type="email" placeholder="Your e-mail">
<DemoIcon slot="media" />
</ListInput>
<ListInput type="url" placeholder="URL">
<DemoIcon slot="media" />
</ListInput>
</List>
<BlockTitle>Label + Input</BlockTitle>
<List strongIos insetIos>
<ListInput label="Name" type="text" placeholder="Your name" />
<ListInput label="Password" type="password" placeholder="Your password" />
<ListInput label="E-mail" type="email" placeholder="Your e-mail" />
<ListInput label="URL" type="url" placeholder="URL" />
</List>
<BlockTitle>Only Inputs</BlockTitle>
<List strongIos insetIos>
<ListInput type="text" placeholder="Your name" />
<ListInput type="password" placeholder="Your password" />
<ListInput type="email" placeholder="Your e-mail" />
<ListInput type="url" placeholder="URL" />
</List>
<BlockTitle>Inputs + Additional Info</BlockTitle>
<List strongIos insetIos>
<ListInput type="text" placeholder="Your name" info="Full name please" />
<ListInput
type="password"
placeholder="Your password"
info="8 characters minimum"
/>
<ListInput
type="email"
placeholder="Your e-mail"
info="Your work e-mail address"
/>
<ListInput type="url" placeholder="URL" info="Your website URL" />
</List>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.