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.
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 | |
onBlur | function(e) |
| |
onChange | function(e) |
| |
onClear | function(e) |
| |
onFocus | function(e) |
| |
onInput | 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) |
<script>import {Page,Navbar,NavbarBackLink,BlockTitle,List,ListInput,useTheme,} from 'konsta/svelte';import DemoIcon from '../components/DemoIcon.svelte';let name = { value: '', changed: false };let demoValue = '';$: theme = useTheme((newValue) => (theme = newValue));$: hairlines = theme !== 'material';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>Full Layout / Inline Labels</BlockTitle><List {hairlines}><ListInput label="Name" inlineLabel type="text" placeholder="Your name"><DemoIcon slot="media" /></ListInput><ListInputlabel="Password"inlineLabeltype="password"placeholder="Your password"><DemoIcon slot="media" /></ListInput><ListInputlabel="E-mail"inlineLabeltype="email"placeholder="Your e-mail"><DemoIcon slot="media" /></ListInput><ListInput label="URL" inlineLabel type="url" placeholder="URL"><DemoIcon slot="media" /></ListInput><ListInputlabel="Phone"inlineLabeltype="tel"placeholder="Your phone number"><DemoIcon slot="media" /></ListInput><ListInputlabel="Gender"inlineLabeltype="select"dropdowndefaultValue="Male"placeholder="Please choose..."><DemoIcon slot="media" /><option value="Male">Male</option><option value="Female">Female</option></ListInput><ListInputlabel="Birthday"inlineLabeltype="date"defaultValue="2014-04-30"placeholder="Please choose..."><DemoIcon slot="media" /></ListInput><ListInputlabel="Date time"inlineLabeltype="datetime-local"placeholder="Please choose..."><DemoIcon slot="media" /></ListInput><ListInputlabel="Textarea"inlineLabeltype="textarea"placeholder="Bio"inputclass="h-20 resize-none"><DemoIcon slot="media" /></ListInput></List><BlockTitle>Full Layout / Stacked Labels</BlockTitle><List {hairlines}><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><ListInputlabel="Gender"type="select"dropdowndefaultValue="Male"placeholder="Please choose..."><DemoIcon slot="media" /><option value="Male">Male</option><option value="Female">Female</option></ListInput><ListInputlabel="Birthday"type="date"defaultValue="2014-04-30"placeholder="Please choose..."><DemoIcon slot="media" /></ListInput><ListInputlabel="Date time"type="datetime-local"placeholder="Please choose..."><DemoIcon slot="media" /></ListInput><ListInputlabel="Textarea"type="textarea"placeholder="Bio"inputclass="h-20 resize-none"><DemoIcon slot="media" /></ListInput></List><BlockTitle>Floating Labels</BlockTitle><List {hairlines}><ListInput label="Name" floatingLabel type="text" placeholder="Your name"><DemoIcon slot="media" /></ListInput><ListInputlabel="Password"floatingLabeltype="password"placeholder="Your password"><DemoIcon slot="media" /></ListInput><ListInputlabel="E-mail"floatingLabeltype="email"placeholder="Your e-mail"><DemoIcon slot="media" /></ListInput><ListInput label="URL" floatingLabel type="url" placeholder="URL"><DemoIcon slot="media" /></ListInput><ListInputlabel="Phone"floatingLabeltype="tel"placeholder="Your phone number"><DemoIcon slot="media" /></ListInput></List><BlockTitle>Validation + Additional Info</BlockTitle><List {hairlines}><ListInputlabel="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 {hairlines}><ListInputlabel="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 {hairlines}><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 {hairlines}><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 {hairlines}><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 {hairlines}><ListInput type="text" placeholder="Your name" info="Full name please" /><ListInputtype="password"placeholder="Your password"info="8 characters minimum"/><ListInputtype="email"placeholder="Your e-mail"info="Your work e-mail address"/><ListInput type="url" placeholder="URL" info="Your website URL" /></List><BlockTitle>Only Inputs Inset</BlockTitle><List inset><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></Page>