Input

Inputs let users enter and edit text.
import { Input } from '../components'
​
<Input
    placeholder={'Place your Text'}
/>
​
Input can be dark on the bright screen.
import { Input } from '../components'
​
<Input
    dark
    placeholder={'Place your Text'}
/>
​
Input can be disabled:
import { Input } from '../components/'
​
<Input
    disabled
    placeholder={'Place your Text'}
/>
​
You can make input bordered:
import { Input } from '../components/'
​
<Input
    type="bordered"
    placeholder={'Place your Text'}
/>
​
You can make the input with a caption:
import { Input } from '../components/'
​
<Input
    caption="Simple caption text"
    placeholder={'Place your Text'}
/>
​
You can make the input with a label:
import { Input } from '../components/'
​
<Input
    label="Simple label text"
    placeholder={'Place your Text'}
/>
Properties
Name
Type
Description
placeholder
string
A string to be displayed when there is no value.
dark
bool
Makes input dark.
disabled
bool
Makes input disabled.
label
ReactText | (TextProps) => ReactElement
String, number or a function component to render above the input field. If it is a function, expected to return a Text.
caption
ReactText | (TextProps) => ReactElement
String, number or a function component to render below the input field. If it is a function, expected to return a Text.
value
string
A value displayed in input field.

Toggle

Screens

Last modified 2yr ago

Name	Type	Description
placeholder	`string`	A string to be displayed when there is no value.
dark	`bool`	Makes input dark.
disabled	`bool`	Makes input disabled.
label	`ReactText \| (TextProps) => ReactElement`	String, number or a function component to render above the input field. If it is a function, expected to return a Text.
caption	`ReactText \| (TextProps) => ReactElement`	String, number or a function component to render below the input field. If it is a function, expected to return a Text.
value	`string`	A value displayed in input field.