Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@commercetools-uikit/text-input

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@commercetools-uikit/text-input

A controlled text input component for single-line strings with validation states.

  • 0.0.0-canary-20241202165718
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created

TextInput

Description

A controlled text input component for single-line strings with validation states.

Installation

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

Usage

import TextInput from '@commercetools-uikit/text-input';

const Example = () => (
  <TextInput value="foo" onChange={(event) => alert(event.target.value)} />
);

export default Example;

Properties

PropsTypeRequiredDefaultDescription
idstringUsed as HTML id property. An id is auto-generated when it is not specified.
autoCompletestringUsed as HTML autocomplete property
aria-invalidbooleanIndicate if the value entered in the input is invalid.
aria-errormessagestringHTML ID of an element containing an error message related to the input.
classNamestringclassName forwarded to the underlying <input />.
namestringUsed as HTML name of the input component. property
valuestringValue of the input component.
onChangeChangeEventHandlerCalled with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
onBlurFocusEventHandlerCalled when input is blurred
onFocusFocusEventHandlerCalled when input is focused
isAutofocussedbooleanFocus the input on initial render
isCondensedbooleanUse this property to reduce the paddings of the component for a ui compact variant
isDisabledbooleanIndicates that the input cannot be modified (e.g not authorized, or changes currently saving).
isReadOnlybooleanIndicates that the field is displaying read-only content
hasErrorbooleanIndicates if the input has invalid values
hasWarningboolean
placeholderstringPlaceholder text for the input
horizontalConstraintunion
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.
maxLengthnumberMaximum 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-* props

The component further forwards all data- attributes to the underlying input component.

Static methods

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

Main Functions and use cases are:

  • Input field for single-line strings

FAQs

Package last updated on 02 Dec 2024

Did you know?

Socket

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.

Install

Related posts