Package detail

@paprika/input

acl-services24.5kMIT7.0.2

The Input component is a standard text input with some enhancements that can be used as a controlled or uncontrolled component.

readme

@paprika/input

Description

The Input component is a standard text input with some enhancements that can be used as a controlled or uncontrolled component.

Installation

yarn add @paprika/input

or with npm:

npm install @paprika/input

Props

Input

Prop Type required default Description
a11yText string false null Provides a non-visible label for this input for assistive technologies.
children node false null Optional Input.Container to collect props for root DOM element.
clearIcon node false null Custom icon for the clear action in the input.
defaultValue string false null Sets the default input value for an uncontrolled component.
hasClearButton bool false false If true displays a clear button inside the input if it contains a value.
hasError bool false false If true displays a red border around input to show error.
icon node false null Displays an icon inside the input.
isDisabled bool false false If true it makes the input disabled.
isReadOnly bool false false If true it makes the input read only.
onChange func false () => {} Callback to be executed when the input value is changed. Receives the onChange event as an argument, except when the clear button is clicked, then the argument is null. Required when value prop is provided (component is controlled).
size [ Input.types.size.SMALL, Input.types.size.MEDIUM, Input.types.size.LARGE] false Input.types.size.MEDIUM Changes the size of the input.
type [ Input.types.type.EMAIL, Input.types.type.PASSWORD, Input.types.type.SEARCH, Input.types.type.TELEPHONE, Input.types.type.TEXT, Input.types.type.URL] false Input.types.type.TEXT Allows user to specify the type of input.
value string false undefined The value inside of the input
hasCSSReset bool false false If true all: unset; will be applied

Input.Container

All props and attributes are spread onto the root container <div> element.

Usage

The <Input> can be used as a controlled or an uncontrolled component.

To use it as controlled:

import Input from "@paprika/input";
...
const [value, setValue] = React.useState("default value");
...
<Input
  value={value}
  onChange={event => {
    setValue(event ? event.target.value : "");
  }}
/>

To use it as an uncontrolled component:

import Input from "@paprika/input";
...
const refInput = React.useRef();
...
<Input
  defaultValue="default value"
  ref={refInput}
/>
...
refInput.current.value // latest value

Dependencies

The <L10n> component is a required context provider when the hasClearButton prop is provided. It should wrap the <Input> (or your application) for localization of the clear button's ARIA label.

Links