@highlight-ui/input

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