Getting Started
  • Installation
Components
  • Alert
  • Badge
  • Button
  • Card
  • Checkbox
  • Drawer
  • Dropdown
  • Input
  • Modal
  • Overlay
  • Radio
  • Switch
  • Tabs
  • Tag
  • Toast
Advanced Components
  • Searchable Select
  • Datatable (Beta)
Dropdown
Modal

    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.

    <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.

    <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.

    NameTypeDefaultDescription
    iconReactNodenullIcon of the component.
    isLoadingbooleanfalseLoading state of the component.
    colorTwColor | Tailwind Color Names UnionblueColors of the component.
    sizestring | sm | base | lgbaseSizes of the component.
    variantstring | outlined | underline | filledoutlinedVariant of the component.
    labelstringnullLabel of the component.
    isInvalidbooleanfalseInvalid state of the component.
    errorsstring[][]Errors of the component.
    descriptionstringnullDescription of the component.
    roundedbooleanfalseFully rounded design of the component.
    passwordRevealbooleanfalseChange type prop of the component.