Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@commercetools-uikit/text-input
Advanced tools
A controlled text input component for single-line strings with validation states.
A controlled text input component for single-line strings with validation states.
yarn add @commercetools-uikit/text-input
npm --save install @commercetools-uikit/text-input
Additionally install the peer dependencies (if not present)
yarn add react
npm --save install react
import TextInput from '@commercetools-uikit/text-input';
const Example = () => (
<TextInput value="foo" onChange={(event) => alert(event.target.value)} />
);
export default Example;
Props | Type | Required | Default | Description |
---|---|---|---|---|
id | string | Used as HTML id property. An id is auto-generated when it is not specified. | ||
autoComplete | string | Used as HTML autocomplete property | ||
aria-invalid | boolean | Indicate if the value entered in the input is invalid. | ||
aria-errormessage | string | HTML ID of an element containing an error message related to the input. | ||
className | string | className forwarded to the underlying <input /> . | ||
name | string | Used as HTML name of the input component. property | ||
value | string | ✅ | Value of the input component. | |
onChange | ChangeEventHandler | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. | ||
onBlur | FocusEventHandler | Called when input is blurred | ||
onFocus | FocusEventHandler | Called when input is focused | ||
isAutofocussed | boolean | Focus the input on initial render | ||
isCondensed | boolean | Use this property to reduce the paddings of the component for a ui compact variant | ||
isDisabled | boolean | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | ||
isReadOnly | boolean | Indicates that the field is displaying read-only content | ||
hasError | boolean | Indicates if the input has invalid values | ||
hasWarning | boolean | |||
placeholder | string | Placeholder text for the input | ||
horizontalConstraint | union Possible values: , 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto' | 'scale' | Horizontal size limit of the input fields. | |
maxLength | number | Maximum number of characters allowed in the input. If this prop is used, it is recommended to inform the user about this limit in the InputField description, or otherwise. |
data-*
propsThe component further forwards all data-
attributes to the underlying input
component.
TextInput.isEmpty
Returns true
when the value is considered empty, which is when the value is empty or consists of spaces only.
TextInput.isEmpty(''); // -> true
TextInput.isEmpty(' '); // -> true
TextInput.isEmpty('tree'); // -> false
FAQs
A controlled text input component for single-line strings with validation states.
We found that @commercetools-uikit/text-input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.