Input

Installation

yarn add @neokit/input

Import

import { Input } from '@neokit/input';

Basic Usage

<Input placeholder="Nombres" />

Input sizes

Use the size prop to change the size of the input. You can set the value to xs, sm, md, or lg.

<Input size="lg" placeholder="Height 56" />
<Input size="md" placeholder="Height 44" />
<Input size="sm" placeholder="Height 36" />
<Input size="xs" placeholder="Height 32" />

Input disabled state

Pass the isDisabled prop to disabled input action.

<Input placeholder="Nombres" isDisabled />
<Input placeholder="Nombres" icon={ <Document /> } isDisabled />

Input fullWidth

To take full width of the parent element, use fullWidth prop.

<Input isFullWidth placeholder="Nombres" />

Input icon

To add an icon to the input, use the icon property.

You can also pass the iconPosition prop to change the position of the icon. You can set the value to left, right

<Input icon={ <Document /> } placeholder="Nombres" />
<Input icon={ <Document /> } iconPosition="right" placeholder="Nombres" />

Input label

To add a label to the input, use the label property.

You can also pass the labelColor prop to change the color of the label.

<Input label="Label" placeholder="Nombres" />
<Input label="Label" labelColor="red" placeholder="Nombres" />

Input error

To add a isInvalid to the input, use the isInvalid property.

You can also pass the messageError prop to display an error text at the bottom of the input.

<Input placeholder="Nombres" isInvalid messageError="Mensaje de error" />

Controlled Input

<Input onChange={(e) => alert(event.target.value)} placeholder="Nombres" />