List Input

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 border-opacity-30 dark:border-white dark:border-opacity-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 select inputs)
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
outline	boolean	undefined	Renders outline-style input (with border around), overwrites outlineIos and outlineMaterial
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 Events

Name	Type	Description
blur	function(e)	blur event handler
change	function(e)	change event handler
clear	function(e)	clear event handler
focus	function(e)	focus event handler
input	function(e)	input event handler

ListInput Slots

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

Vue

<template>
  <i-page>
    <i-navbar title="Form Inputs" />

    <i-block-title>Default</i-block-title>
    <i-list inset-ios strong-ios>
      <i-list-input label="Name" type="text" placeholder="Your name">
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        label="Password"
        type="password"
        placeholder="Your password"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input label="E-mail" type="email" placeholder="Your e-mail">
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input label="URL" type="url" placeholder="URL">
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input label="Phone" type="tel" placeholder="Your phone number">
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-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>
      </i-list-input>

      <i-list-input
        label="Birthday"
        type="date"
        default-value="2014-04-30"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        label="Date time"
        type="datetime-local"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        label="Textarea"
        type="textarea"
        placeholder="Bio"
        input-class="!h-20 resize-none"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>
    </i-list>

    <i-block-title>Outline</i-block-title>
    <i-list inset-ios strong-ios>
      <i-list-input outline label="Name" type="text" placeholder="Your name">
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        outline
        label="Password"
        type="password"
        placeholder="Your password"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        outline
        label="E-mail"
        type="email"
        placeholder="Your e-mail"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input outline label="URL" type="url" placeholder="URL">
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        outline
        label="Phone"
        type="tel"
        placeholder="Your phone number"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        outline
        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>
      </i-list-input>

      <i-list-input
        outline
        label="Birthday"
        type="date"
        default-value="2014-04-30"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        outline
        label="Date time"
        type="datetime-local"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        outline
        label="Textarea"
        type="textarea"
        placeholder="Bio"
        input-class="!h-20 resize-none"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>
    </i-list>

    <i-block-title>Floating Labels</i-block-title>
    <i-list inset-ios strong-ios>
      <i-list-input
        label="Name"
        floating-label
        type="text"
        placeholder="Your name"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        label="Password"
        floating-label
        type="password"
        placeholder="Your password"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        label="E-mail"
        floating-label
        type="email"
        placeholder="Your e-mail"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input label="URL" floating-label type="url" placeholder="URL">
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        label="Phone"
        floating-label
        type="tel"
        placeholder="Your phone number"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>
    </i-list>

    <i-block-title>Outline + Floating Labels</i-block-title>
    <i-list inset-ios strong-ios>
      <i-list-input
        outline
        label="Name"
        floating-label
        type="text"
        placeholder="Your name"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        outline
        label="Password"
        floating-label
        type="password"
        placeholder="Your password"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        outline
        label="E-mail"
        floating-label
        type="email"
        placeholder="Your e-mail"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        outline
        label="URL"
        floating-label
        type="url"
        placeholder="URL"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input
        outline
        label="Phone"
        floating-label
        type="tel"
        placeholder="Your phone number"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>
    </i-list>

    <i-block-title>Validation + Additional Info</i-block-title>
    <i-list inset-ios strong-ios>
      <i-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>
      </i-list-input>
    </i-list>

    <i-block-title>Clear Button</i-block-title>
    <i-list inset-ios strong-ios>
      <i-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>
      </i-list-input>
    </i-list>

    <i-block-title>Icon + Input</i-block-title>
    <i-list inset-ios strong-ios>
      <i-list-input type="text" placeholder="Your name">
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input type="password" placeholder="Your password">
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input type="email" placeholder="Your e-mail">
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>

      <i-list-input type="url" placeholder="URL">
        <template #media>
          <demo-icon />
        </template>
      </i-list-input>
    </i-list>

    <i-block-title>Label + Input</i-block-title>
    <i-list inset-ios strong-ios>
      <i-list-input label="Name" type="text" placeholder="Your name" />

      <i-list-input
        label="Password"
        type="password"
        placeholder="Your password"
      />

      <i-list-input label="E-mail" type="email" placeholder="Your e-mail" />

      <i-list-input label="URL" type="url" placeholder="URL" />
    </i-list>

    <i-block-title>Only Inputs</i-block-title>
    <i-list inset-ios strong-ios>
      <i-list-input type="text" placeholder="Your name" />

      <i-list-input type="password" placeholder="Your password" />

      <i-list-input type="email" placeholder="Your e-mail" />

      <i-list-input type="url" placeholder="URL" />
    </i-list>

    <i-block-title>Inputs + Additional Info</i-block-title>
    <i-list inset-ios strong-ios>
      <i-list-input
        type="text"
        placeholder="Your name"
        info="Full name please"
      />

      <i-list-input
        type="password"
        placeholder="Your password"
        info="8 characters minimum"
      />

      <i-list-input
        type="email"
        placeholder="Your e-mail"
        info="Your work e-mail address"
      />

      <i-list-input type="url" placeholder="URL" info="Your website URL" />
    </i-list>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBlockTitle,
    iList,
    iListInput,
  } from 'ina-ui/vue';
  import DemoIcon from '../components/DemoIcon.vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBlockTitle,
      iList,
      iListInput,
      DemoIcon,
    },
    setup() {
      const name = ref({ value: '', changed: false });
      const demoValue = ref('');

      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,
        onNameChange,
        onDemoValueChange,
        onDemoValueClear,
      };
    },
  };
</script>

React