@highlight-ui/input NPM

@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