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
ListInput Props
ListInput Snippets
Examples

List Input Components

There are following components included:

ListInput - list item input element

ListInput Props

Name	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.bgIos	string	''
colors.bgMaterial	string	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.errorBorder	string	'border-red-500'
colors.errorText	string	'text-red-500'
colors.labelTextFocusIos	string	''
colors.labelTextFocusMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.labelTextIos	string	''
colors.labelTextMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.outlineBorderFocusIos	string	'border-primary'
colors.outlineBorderFocusMaterial	string	'border-md-light-primary dark:border-md-dark-primary'
colors.outlineBorderIos	string	'border-black/30 dark:border-white/30'
colors.outlineBorderMaterial	string	'border-md-light-on-surface dark:border-md-dark-on-surface'
colors.outlineLabelBgIos	string	'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.outlineLabelBgMaterial	string	'bg-md-light-surface dark:bg-md-dark-surface'
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
info	string		Content of the input "info"
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
onBlur	function(e)		`blur`
onChange	function(e)		`change`
onClear	function(e)		`clear`
onFocus	function(e)		`focus`
onInput	function(e)		`input`
outline	boolean	undefined	Renders outline-style input (with border around), overwrites
outlineIos	boolean	false	Renders outline-style input (with border around) in iOS theme
outlineMaterial	boolean	false	Renders outline-style input (with border around) in Material theme
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

ListInput Snippets

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)

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">
    {#snippet left()}
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
  </Navbar>

  <BlockTitle>Default</BlockTitle>
  <List strongIos insetIos>
    <ListInput label="Name" type="text" placeholder="Your name">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput label="Password" type="password" placeholder="Your password">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput label="E-mail" type="email" placeholder="Your e-mail">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput label="URL" type="url" placeholder="URL">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput label="Phone" type="tel" placeholder="Your phone number">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      label="Gender"
      type="select"
      dropdown
      defaultValue="Male"
      placeholder="Please choose..."
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </ListInput>

    <ListInput
      label="Birthday"
      type="date"
      defaultValue="2014-04-30"
      placeholder="Please choose..."
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      label="Date time"
      type="datetime-local"
      placeholder="Please choose..."
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      label="Textarea"
      type="textarea"
      placeholder="Bio"
      inputClass="!h-20 resize-none"
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>
  </List>

  <BlockTitle>Outline</BlockTitle>
  <List strongIos insetIos>
    <ListInput outline label="Name" type="text" placeholder="Your name">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      outline
      label="Password"
      type="password"
      placeholder="Your password"
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput outline label="E-mail" type="email" placeholder="Your e-mail">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput outline label="URL" type="url" placeholder="URL">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput outline label="Phone" type="tel" placeholder="Your phone number">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      outline
      label="Gender"
      type="select"
      dropdown
      defaultValue="Male"
      placeholder="Please choose..."
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </ListInput>

    <ListInput
      outline
      label="Birthday"
      type="date"
      defaultValue="2014-04-30"
      placeholder="Please choose..."
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      outline
      label="Date time"
      type="datetime-local"
      placeholder="Please choose..."
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      outline
      label="Textarea"
      type="textarea"
      placeholder="Bio"
      inputClass="!h-20 resize-none"
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>
  </List>

  <BlockTitle>Floating Labels</BlockTitle>
  <List strongIos insetIos>
    <ListInput label="Name" floatingLabel type="text" placeholder="Your name">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      label="Password"
      floatingLabel
      type="password"
      placeholder="Your password"
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      label="E-mail"
      floatingLabel
      type="email"
      placeholder="Your e-mail"
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput label="URL" floatingLabel type="url" placeholder="URL">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      label="Phone"
      floatingLabel
      type="tel"
      placeholder="Your phone number"
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>
  </List>

  <BlockTitle>Outline + Floating Labels</BlockTitle>
  <List strongIos insetIos>
    <ListInput
      outline
      label="Name"
      floatingLabel
      type="text"
      placeholder="Your name"
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      outline
      label="Password"
      floatingLabel
      type="password"
      placeholder="Your password"
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      outline
      label="E-mail"
      floatingLabel
      type="email"
      placeholder="Your e-mail"
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput outline label="URL" floatingLabel type="url" placeholder="URL">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput
      outline
      label="Phone"
      floatingLabel
      type="tel"
      placeholder="Your phone number"
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </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}
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </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}
    >
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>
  </List>

  <BlockTitle>Icon + Input</BlockTitle>
  <List strongIos insetIos>
    <ListInput type="text" placeholder="Your name">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput type="password" placeholder="Your password">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput type="email" placeholder="Your e-mail">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </ListInput>

    <ListInput type="url" placeholder="URL">
      {#snippet media()}
        <DemoIcon />
      {/snippet}
    </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>

List Input Svelte Component

Contents

List Input Components

ListInput Props

ListInput Snippets

Examples