Input

Input #

Input component is standard form object

import { PInput } from 'pearkit';

Basic #

It is the standard input element that you can use in forms. Gets all form attributes.

<PInput placeholder="example@pearkit.com"/>

Variant #

We created 3 variants, thinking that you can make different designs. outlined is used by default. The other two are underlined and filled options.

<PInput />
<PInput variant="underlined" />
<PInput variant="filled" />

Sizes #

The input component comes with 3 different size options. These are sm, base and lg. By default base works.

<PInput size="sm"/>
<PInput />
<PInput size="lg"/>

Rounded #

For fully rounded edges, you can use the rounded property.

<PInput rounded />
<PInput rounded variant="underlined" />
<PInput rounded variant="filled" />

Invalid #

You can use the isInvalid property when using input validation on a form element.

<PInput isInvalid={true} />

Errors #

Or you can write errors by filling in the errors property. This option puts the component in invalid state without looking at the isInvalid property.

Error 1
Error 2

Error 1
Error 2

Error 1
Error 2

<PInput errors={['Error 1', 'Error 2']} />

Label #

You can declare what the input is about by adding a label property.

<PInput label="Email"/>

Description #

By adding a description property, you can specify a situation that needs attention for the input.

Please add valid email address

<PInput description="Please add valid email address"/>

Loading #

Considering that you are using server-side validation for the input component, we thought you would need an isLoading feature. :)

<PInput isLoading={true}/>

Disabled #

For the disabled property, it is sufficient to provide the property itself directly.

<PInput disabled/>

Icon #

Is it possible without an icon ? Of course not :) Here is how to use it with an icon.

<PInput icon={<Icon icon="mdi:envelope"/>} />

Password Reveal #

If your input component type is password we give you a show/hide password icon. Also, you do not have to show this icon all the time. You can use the passwordReveal property to manage this situation.

<PInput type="password" passwordReveal={false} />

Accessibility (Not Ready Yet) #

None

Api #

Here you can see all the working features for the input component. You can also send all HTML input properties.

Name	Type	Default	Description
icon	ReactNode	null	Icon of the component.
isLoading	boolean	false	Loading state of the component.
color	TwColor \| Tailwind Color Names Union	blue	Colors of the component.
size	string \| sm \| base \| lg	base	Sizes of the component.
variant	string \| outlined \| underline \| filled	outlined	Variant of the component.
label	string	null	Label of the component.
isInvalid	boolean	false	Invalid state of the component.
errors	string[]	[]	Errors of the component.
description	string	null	Description of the component.
rounded	boolean	false	Fully rounded design of the component.
passwordReveal	boolean	false	Change type prop of the component.

Dropdown

Modal