@commercetools-uikit/text-input

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 React from 'react';
import TextInput from '@commercetools-uikit/text-input';

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

export default Example;

Properties

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
className	string
name	string			Used as HTML name of the input component. property
value	string	✅		Value of the input component.
onChange	custom			Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. Signature: (event) => void
onBlur	func			Called when input is blurred Signature: (event) => void
onFocus	func			Called when input is focused Signature: (event) => void
isAutofocussed	bool			Focus the input on initial render
isDisabled	bool			Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
isReadOnly	bool			Indicates that the field is displaying read-only content
hasError	bool			Indicates if the input has invalid values
hasWarning	bool
placeholder	string			Placeholder text for the input
horizontalConstraint	enum Possible values: 's', 'm', 'l', 'xl', 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'		'scale'	Horizontal size limit of the input fields.

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