List Input React Component

List Input Components
ListInput Props
Examples

Form elements allow you to create flexible and beautiful Form layout. Form elements are just well known List View (List and List Item React components) but with few additional components.

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.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
defaultValue	any		Input value, in case of uncontrolled component
disabled	boolean		Marks input as disabled
dropdown	boolean	false	Renders additional dropdown icon (useful to use with `select` inputs)
error	ReactNode		Content of the input "error"
floatingLabel	boolean	false	Makes floating label
hairlines	boolean	true	Renders outer hairlines (borders)
info	ReactNode		Content of the input "info"
inlineLabel	boolean	false	Makes label inline
input	ReactNode		Custom input element
inputClassName	string		Additional input styles
inputId	string		Input id attribute
inputMode	string		Value of input's native "inputmode" attribute
inputStyle	CSSProperties		Additional input classes
label	ReactNode		Label content
max	string \| number		Value of input's native "max" attribute
maxLength	string \| number		Value of input's native "maxlength" attribute
media	ReactNode		Content of the list item "media" area (e.g. icon)
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)		`blur` event handler
onChange	function(e)		`change` event handler
onClear	function(e)		`clear` event handler
onFocus	function(e)		`focus` event handler
onInput	function(e)		`input` event handler

Examples

FormInputs.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  BlockTitle,
  List,
  ListInput,
  useTheme,
} from 'konsta/react';

import DemoIcon from '../components/DemoIcon';

export default function FormInputsPage() {
  const [name, setName] = useState({ value: '', changed: false });
  const [demoValue, setDemoValue] = useState('');
  const theme = useTheme();
  const hairlines = theme !== 'material';

  const onNameChange = (e) => {
    setName({ value: e.target.value, changed: true });
  };
  const onDemoValueChange = (e) => {
    setDemoValue(e.target.value);
  };
  const onDemoValueClear = () => {
    setDemoValue('');
  };
  return (
    <Page>
      <Navbar
        title="Form Inputs"
        />

      <BlockTitle>Full Layout / Inline Labels</BlockTitle>
      <List hairlines={hairlines}>
        <ListInput
          label="Name"
          inlineLabel
          type="text"
          placeholder="Your name"
          media={<DemoIcon />}
        />

        <ListInput
          label="Password"
          inlineLabel
          type="password"
          placeholder="Your password"
          media={<DemoIcon />}
        />

        <ListInput
          label="E-mail"
          inlineLabel
          type="email"
          placeholder="Your e-mail"
          media={<DemoIcon />}
        />

        <ListInput
          label="URL"
          inlineLabel
          type="url"
          placeholder="URL"
          media={<DemoIcon />}
        />

        <ListInput
          label="Phone"
          inlineLabel
          type="tel"
          placeholder="Your phone number"
          media={<DemoIcon />}
        />

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

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

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

        <ListInput
          label="Textarea"
          inlineLabel
          type="textarea"
          placeholder="Bio"
          media={<DemoIcon />}
          inputClassName="h-20 resize-none"
        />
      </List>

      <BlockTitle>Full Layout / Stacked Labels</BlockTitle>
      <List hairlines={hairlines}>
        <ListInput
          label="Name"
          type="text"
          placeholder="Your name"
          media={<DemoIcon />}
        />

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

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

        <ListInput
          label="URL"
          type="url"
          placeholder="URL"
          media={<DemoIcon />}
        />

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

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

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

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

        <ListInput
          label="Textarea"
          type="textarea"
          placeholder="Bio"
          media={<DemoIcon />}
          inputClassName="h-20 resize-none"
        />
      </List>

      <BlockTitle>Floating Labels</BlockTitle>
      <List hairlines={hairlines}>
        <ListInput
          label="Name"
          floatingLabel
          type="text"
          placeholder="Your name"
          media={<DemoIcon />}
        />

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

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

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

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

      <BlockTitle>Validation + Additional Info</BlockTitle>
      <List hairlines={hairlines}>
        <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' : ''
          }
          media={<DemoIcon />}
          onChange={onNameChange}
        />
      </List>

      <BlockTitle>Clear Button</BlockTitle>
      <List hairlines={hairlines}>
        <ListInput
          label="TV Show"
          type="text"
          placeholder="Your favorite TV show"
          info="Type something to see clear button"
          value={demoValue}
          clearButton={demoValue.length > 0}
          media={<DemoIcon />}
          onChange={onDemoValueChange}
          onClear={onDemoValueClear}
        />
      </List>

      <BlockTitle>Icon + Input</BlockTitle>
      <List hairlines={hairlines}>
        <ListInput type="text" placeholder="Your name" media={<DemoIcon />} />

        <ListInput
          type="password"
          placeholder="Your password"
          media={<DemoIcon />}
        />

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

        <ListInput type="url" placeholder="URL" media={<DemoIcon />} />
      </List>

      <BlockTitle>Label + Input</BlockTitle>
      <List hairlines={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={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={hairlines}>
        <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>

      <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>
  );
}