@highlight-ui/input

Installation

Using npm:

npm install @highlight-ui/input

Using yarn:

yarn add @highlight-ui/input

Using pnpm:

pnpm install @highlight-ui/input

In your (S)CSS file:

@import url('@highlight-ui/input');

Once the package is installed, you can import the library:

import { Input, TextArea } from '@highlight-ui/input';

Performance Tips

The Input component depends on imask.js, which is a relatively heavy dependency. This component's package is tree shakeable, if you do not need the input masking functionalities you can import the TextInput component instead of the Input component.

import { TextInput } from '@highlight-ui/input';

If you only need the masking functionalities of the component, you can import the MaskedInput component:

import { MaskedInput } from '@highlight-ui/input';

Usage

import React from 'react';
import { Input } from '@highlight-ui/input';

export default function InputExample() {
  return <Input name="map" color="input-critical" type="light" />;
}

Props 📜

Input

The InputProps extends the HTMLInputElement types

| Prop | Type | Required | Default | Description | | :--------------- | :----------------------------------------------------------------------------------------------------------------------------------------- | :------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | disabled | boolean | No | false | Disables the input element | | className | string | No | | Sets a class name to the component's root element | | inputClassName | string | No | | Allows providing a custom class name to the input element | | outline | "default", "warning", "error" | No | default | Sets the color of the input's border | | focused | boolean | No | false | Focuses the underlying input element | | prefix | React.ReactNode | No | | Renders the passed element on the left side of the input | | prefixVariant | "opaque", "transparent" | No | | Applies the specified style to the prefix element's container | | suffix | React.ReactNode | No | | Renders the passed element on the right side of the input | | containerRef | React.Ref<HTMLDivElement> | No | | Passes a ref to the input's container element | | maskOptions | MaskOptions | No | | Function which accepts locale and returns an imaskjs configuration object used for creating an IMask instance which will control the input element | | onMaskAccept | (e: MaskEvent) => void | No | | Sets a callback for when an event is fired on input changes allowed by the mask. This prop only works with maskOptions provided. | | onMaskComplete | (e: MaskEvent) => void | No | | Sets a callback for when an event is fired on input completion defined by the mask. This prop only works with maskOptions provided. |

TextArea

The TextArea extends the HTMLTextAreaElement types

| Prop | Type | Required | Default | Description | | :------------- | :------------------------------ | :------- | :-------- | :-------------------------------------------- | | disabled | boolean | No | false | Disables the text area element | | outline | "default", "warning", "error" | No | default | Sets the color of the text area's border | | containerRef | React.Ref<HTMLDivElement> | No | | Passes a ref to the input's container element |

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.