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
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('');
SearchTextInput.isEmpty(' ');
SearchTextInput.isEmpty('tree');
Main Functions and use cases are:
- Input field for single-line strings. Used for search.