@highlight-ui/input
Installation
Using npm:
npm install @highlight-ui/inputUsing yarn:
yarn add @highlight-ui/inputUsing pnpm:
pnpm install @highlight-ui/inputIn 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.