Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@highlight-ui/input
Advanced tools
Readme
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';
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';
import React from 'react';
import { Input } from '@highlight-ui/input';
export default function InputExample() {
return <Input name="map" color="input-critical" type="light" />;
}
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. |
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 |
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.
FAQs
Input UI component for the Personio UI Library
The npm package @highlight-ui/input receives a total of 4,217 weekly downloads. As such, @highlight-ui/input popularity was classified as popular.
We found that @highlight-ui/input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.