Input

Features a multipurpose text field. This feature makes this component, which was designed from scratch, truly unique. In a single component, you have a standard text field, a password field with secret visibility toggle, a masking field, and a multi-line field. All of this with 3 style variations to suit the most diverse applications.

About

With Input, our goal is to deliver the definitive text field, combining all the expected features with the look and feel of DS. It uses two incredible libraries to help with some of its features: imask (opens in a new tab) and [react-textarea-autosize](https://www.npmjs.com/package/react (opens in a new tab) -textarea-autosize).

Installation

pnpm add @inpulse-ds/input

Usage

This component needs to be in the context of a form to be rendered. Make sure it is applied this way.

import { useForm } from "react-hook-form";
import { Form } from '@inpulse-ds/form';
import { Input } from '@inpulse-ds/input';
 
const methods = useForm();
 
export function Demo() {
  return (
    <Form methods={methods}>
      <Input name="input" label="Input" />
    </Form>
  );
}

Examples

Default

Rift

Line

Sizes

It is possible to define the size of the text field using the size property. The available options are sm, md and lg.

<Input name="input" label="Input" size="lg" />

Masks and Presets

Control text input in Input through a mask. It is possible to define the mask completely freely using the mask property or choose one of the pre-defined masks using the preset property.

The preset property always overrides the mask property if there is a predefined mask for the chosen value. The available options are:

It is also worth mentioning that the use of the preset property depends on the locale property. For example, the mask of the zipcode preset is different for pt_BR (00000-000) and en_US (00000). This is especially useful for projects that support multiple languages. If locale is not set, the language en_US will be set by default.

Password

Password fields can be created via the type property. If password is chosen, a secret visibility toggle button will be displayed in the field. When you click this button, the text visibility will be switched between visible and hidden.

Multiple lines

It is possible to convert the text field into a multi-line field through the rows property. The value of this property defines the maximum number of lines visible in the field, until the content starts to generate a vertical scroll. By default, the minimum number of visible lines will always be 2.