List Input React Component

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

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.errorTextstring'text-red-500'

Input error color

colors.hairlineErrorstring'hairline-red-500'

Input errored hairline color

colors.hairlineFocusstring'hairline-primary'

Input hairline color

colors.labelFocusstring'text-primary'

Input text color

componentstring'li'

Component's HTML Element

defaultValueany

Input value, in case of uncontrolled component

disabledboolean

Marks input as disabled

dropdownbooleanfalse

Renders additional dropdown icon (useful to use with select inputs)

errorReactNode

Content of the input "error"

floatingLabelbooleanfalse

Makes floating label

hairlinesbooleantrue

Renders outer hairlines (borders)

infoReactNode

Content of the input "info"

inlineLabelbooleanfalse

Makes label inline

inputReactNode

Custom input element

inputClassNamestring

Additional input styles

inputIdstring

Input id attribute

inputModestring

Value of input's native "inputmode" attribute

inputStyleCSSProperties

Additional input classes

labelReactNode

Label content

maxstring | number

Value of input's native "max" attribute

maxLengthstring | number

Value of input's native "maxlength" attribute

mediaReactNode

Content of the list item "media" area (e.g. icon)

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

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

Examples

FormInputs.jsx
import React, { useState } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
BlockTitle,
List,
ListInput,
useTheme,
} from 'tailwind-mobile/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>
);
}
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.