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.
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 |
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 |
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) |
| |
onChange | function(e) |
| |
onClear | function(e) |
| |
onFocus | function(e) |
| |
onInput | function(e) |
|
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><Navbartitle="Form Inputs"/><BlockTitle>Full Layout / Inline Labels</BlockTitle><List hairlines={hairlines}><ListInputlabel="Name"inlineLabeltype="text"placeholder="Your name"media={<DemoIcon />}/><ListInputlabel="Password"inlineLabeltype="password"placeholder="Your password"media={<DemoIcon />}/><ListInputlabel="E-mail"inlineLabeltype="email"placeholder="Your e-mail"media={<DemoIcon />}/><ListInputlabel="URL"inlineLabeltype="url"placeholder="URL"media={<DemoIcon />}/><ListInputlabel="Phone"inlineLabeltype="tel"placeholder="Your phone number"media={<DemoIcon />}/><ListInputlabel="Gender"inlineLabeltype="select"dropdowndefaultValue="Male"placeholder="Please choose..."media={<DemoIcon />}><option value="Male">Male</option><option value="Female">Female</option></ListInput><ListInputlabel="Birthday"inlineLabeltype="date"defaultValue="2014-04-30"placeholder="Please choose..."media={<DemoIcon />}/><ListInputlabel="Date time"inlineLabeltype="datetime-local"placeholder="Please choose..."media={<DemoIcon />}/><ListInputlabel="Textarea"inlineLabeltype="textarea"placeholder="Bio"media={<DemoIcon />}inputClassName="h-20 resize-none"/></List><BlockTitle>Full Layout / Stacked Labels</BlockTitle><List hairlines={hairlines}><ListInputlabel="Name"type="text"placeholder="Your name"media={<DemoIcon />}/><ListInputlabel="Password"type="password"placeholder="Your password"media={<DemoIcon />}/><ListInputlabel="E-mail"type="email"placeholder="Your e-mail"media={<DemoIcon />}/><ListInputlabel="URL"type="url"placeholder="URL"media={<DemoIcon />}/><ListInputlabel="Phone"type="tel"placeholder="Your phone number"media={<DemoIcon />}/><ListInputlabel="Gender"type="select"dropdowndefaultValue="Male"placeholder="Please choose..."media={<DemoIcon />}><option value="Male">Male</option><option value="Female">Female</option></ListInput><ListInputlabel="Birthday"type="date"defaultValue="2014-04-30"placeholder="Please choose..."media={<DemoIcon />}/><ListInputlabel="Date time"type="datetime-local"placeholder="Please choose..."media={<DemoIcon />}/><ListInputlabel="Textarea"type="textarea"placeholder="Bio"media={<DemoIcon />}inputClassName="h-20 resize-none"/></List><BlockTitle>Floating Labels</BlockTitle><List hairlines={hairlines}><ListInputlabel="Name"floatingLabeltype="text"placeholder="Your name"media={<DemoIcon />}/><ListInputlabel="Password"floatingLabeltype="password"placeholder="Your password"media={<DemoIcon />}/><ListInputlabel="E-mail"floatingLabeltype="email"placeholder="Your e-mail"media={<DemoIcon />}/><ListInputlabel="URL"floatingLabeltype="url"placeholder="URL"media={<DemoIcon />}/><ListInputlabel="Phone"floatingLabeltype="tel"placeholder="Your phone number"media={<DemoIcon />}/></List><BlockTitle>Validation + Additional Info</BlockTitle><List hairlines={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' : ''}media={<DemoIcon />}onChange={onNameChange}/></List><BlockTitle>Clear Button</BlockTitle><List hairlines={hairlines}><ListInputlabel="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 />} /><ListInputtype="password"placeholder="Your password"media={<DemoIcon />}/><ListInputtype="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" /><ListInputlabel="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}><ListInputtype="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>);}