@commercetools-uikit/search-text-input

SearchTextInput

Description

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

Installation

yarn add @commercetools-uikit/search-text-input

npm --save install @commercetools-uikit/search-text-input

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import SearchTextInput from '@commercetools-uikit/search-text-input';

const Example = () => (
  <SearchTextInput
    value="foo"
    onChange={(event) => alert(event.target.value)}
    onSubmit={(val) => alert(val)}
    onReset={() => alert('reset')}
  />
);

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
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.
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
onSubmit	Function See signature.	✅		Handler when the search button is clicked.
onReset	Function See signature.	✅		Handler when the clear button is clicked.
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			Indicates if the input has warning values
placeholder	string			Placeholder text for the input
isClearable	boolean		true	Indicates if the input should be cleared when the clear button is clicked. Defaults to true.
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.

Signatures

Signature onSubmit

(searchValue: string) => void

Signature onReset

() => void

data-* props

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

Static methods

SearchTextInput.isEmpty

Returns true when the value is considered empty, which is when the value is empty or consists of spaces only.

SearchTextInput.isEmpty(''); // -> true
SearchTextInput.isEmpty(' '); // -> true
SearchTextInput.isEmpty('tree'); // -> false

Main Functions and use cases are:

• Input field for single-line strings. Used for search.