@commercetools-uikit/search-text-input NPM

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
`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.

javascript typescript design-system react uikit

@babel/runtime @babel/runtime-corejs3 @commercetools-uikit/constraints @commercetools-uikit/design-system @commercetools-uikit/icons @commercetools-uikit/input-utils @commercetools-uikit/secondary-icon-button @commercetools-uikit/utils @emotion/react @emotion/styled prop-types

@everything-registry/sub-chunk-190 @commercetools-uikit/inputs

0.0.0-canary-20240503144721

3 days ago

0.0.0-canary-20240503111328

3 days ago

0.0.0-canary-20240502134907

4 days ago

0.0.0-canary-20240502125854

4 days ago

0.0.0-canary-20240429110037

7 days ago

0.0.0-canary-20240429095712

7 days ago

0.0.0-canary-20240429151613

7 days ago

19.2.0

7 days ago

0.0.0-canary-20240429080049

7 days ago

0.0.0-canary-20240426091858

10 days ago

0.0.0-canary-20240425084041

11 days ago

0.0.0-canary-20240424133322

12 days ago

0.0.0-canary-20240424125820

12 days ago

0.0.0-canary-20240424172230

12 days ago

0.0.0-canary-20240423075704

13 days ago

0.0.0-canary-20240422074013

14 days ago

0.0.0-canary-20240417141019

19 days ago

0.0.0-canary-20240417152832

19 days ago

19.1.0

19 days ago

0.0.0-canary-20240416080627

20 days ago

0.0.0-canary-20240416122003

20 days ago

0.0.0-canary-20240415155633

21 days ago

0.0.0-canary-20240415154231

21 days ago

0.0.0-canary-20240412080035

24 days ago

0.0.0-canary-20240411070250

25 days ago

0.0.0-canary-20240409155122

27 days ago

0.0.0-canary-20240408094037

28 days ago

0.0.0-canary-20240408081653

28 days ago

0.0.0-canary-20240408075655

28 days ago

0.0.0-canary-20240408082643

28 days ago

0.0.0-canary-20240408083654

28 days ago

0.0.0-canary-20240404141323

1 month ago

0.0.0-canary-20240401115502

1 month ago

0.0.0-canary-20240326165038

1 month ago

19.0.0

1 month ago

0.0.0-canary-20240322105825

1 month ago

0.0.0-canary-20240321125808

2 months ago

0.0.0-canary-20240321141818

2 months ago

0.0.0-canary-20240321085855

2 months ago

0.0.0-canary-20240321154822

2 months ago

0.0.0-canary-20240320080808

2 months ago

0.0.0-canary-20240319155008

2 months ago

0.0.0-canary-20240319081838

2 months ago

0.0.0-canary-20240319084420

2 months ago

0.0.0-canary-20240319084832

2 months ago

18.5.0

2 months ago

0.0.0-canary-20240318154412

2 months ago

0.0.0-canary-20240318073724

2 months ago

0.0.0-canary-20240311155934

2 months ago

18.4.0

2 months ago

0.0.0-canary-20240311163353

2 months ago

0.0.0-canary-20240229082531

2 months ago

0.0.0-canary-20240229120215

2 months ago

18.3.0

2 months ago

0.0.0-canary-20240222103400

2 months ago

18.2.0

2 months ago

0.0.0-canary-20240221114521

2 months ago

0.0.0-canary-20240219160124

3 months ago

18.1.0

3 months ago

0.0.0-canary-20240214142237

3 months ago

0.0.0-canary-20240214093533

3 months ago

18.0.0

3 months ago

0.0.0-canary-20240213091505

3 months ago

0.0.0-canary-20240212084750

3 months ago

0.0.0-canary-20240212173604

3 months ago

0.0.0-canary-20240209081746

3 months ago

0.0.0-canary-20240208102915

3 months ago

0.0.0-canary-20240207115036

3 months ago

17.1.0

3 months ago

0.0.0-canary-20240206161325

3 months ago

0.0.0-canary-20240202080838

3 months ago

0.0.0-canary-20240131162657

3 months ago

0.0.0-canary-20240131092002

3 months ago

0.0.0-canary-20240130102905

3 months ago

0.0.0-canary-20240129162718

3 months ago

17.0.1

3 months ago

0.0.0-canary-20240123154713

3 months ago

0.0.0-canary-20240118123543

4 months ago

17.0.0

4 months ago

0.0.0-canary-20240118125451

4 months ago

0.0.0-canary-20240117152032

4 months ago

0.0.0-canary-20240116201138

4 months ago

0.0.0-canary-20240116164945

4 months ago

0.0.0-canary-20240112093529

4 months ago

0.0.0-canary-20240109150004

4 months ago

0.0.0-canary-20231229075922

4 months ago

0.0.0-canary-20231221092239

5 months ago

0.0.0-canary-20231219120012

5 months ago

0.0.0-canary-20231219120942

5 months ago

0.0.0-canary-20231219122613

5 months ago

0.0.0-canary-20231219074106

5 months ago

0.0.0-canary-20231214155242

5 months ago

16.12.1

5 months ago

0.0.0-canary-20231204132537

5 months ago

0.0.0-canary-20231204104818

5 months ago

0.0.0-canary-20231128120330

5 months ago

0.0.0-canary-20231128121512

5 months ago

0.0.0-canary-20231128090613

5 months ago

16.12.0

5 months ago

0.0.0-canary-20230927101743

7 months ago

0.0.0-canary-20230926074140

7 months ago

0.0.0-canary-20230824090411

9 months ago

0.0.0-canary-20230731114902

9 months ago

0.0.0-canary-20230731102408

9 months ago

0.0.0-canary-20230822093959

9 months ago

0.0.0-canary-20231120163956

6 months ago

16.9.0

6 months ago

0.0.0-canary-20230802081825

9 months ago

0.0.0-canary-20230721071347

10 months ago

16.11.0

6 months ago

0.0.0-canary-20230705071834

10 months ago

0.0.0-canary-20230919074955

8 months ago

0.0.0-canary-20230922090152

8 months ago

0.0.0-canary-20231020071712

7 months ago

0.0.0-canary-20230919064630

8 months ago

0.0.0-canary-20231023144936

7 months ago

0.0.0-canary-20230823133527

9 months ago

0.0.0-canary-20230731113035

9 months ago

0.0.0-canary-20231020172218

7 months ago

16.5.0

10 months ago

0.0.0-canary-20230908094846

8 months ago

0.0.0-canary-20231020070159

7 months ago

0.0.0-canary-20230713133803

10 months ago

0.0.0-canary-20230927090022

7 months ago

0.0.0-canary-20231012155352

7 months ago

0.0.0-canary-20230811122631

9 months ago

0.0.0-canary-20230901092912

8 months ago

0.0.0-canary-20230921130022

8 months ago

16.10.0

6 months ago

16.6.1

9 months ago

0.0.0-canary-20231120183429

6 months ago

0.0.0-canary-20231010104830

7 months ago

0.0.0-canary-20231109141457

6 months ago

16.6.0

9 months ago

0.0.0-canary-20230831113711

8 months ago

0.0.0-canary-20230713101815

10 months ago

0.0.0-canary-20231107092719

6 months ago

0.0.0-canary-20231002082126

7 months ago

0.0.0-canary-20230713135809

10 months ago

0.0.0-canary-20231030124826

6 months ago

0.0.0-canary-20231023153427

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

0.0.0-canary-20231117123740

6 months ago

0.0.0-canary-20231114154535

6 months ago

0.0.0-canary-20230817081120

9 months ago

0.0.0-canary-20230719081123

10 months ago

0.0.0-canary-20230830124456

8 months ago

0.0.0-canary-20231114065040

6 months ago

0.0.0-canary-20231020094744

7 months ago

0.0.0-canary-20231107090630

6 months ago

0.0.0-canary-20230817075326

9 months ago

0.0.0-canary-20230821101457

9 months ago

0.0.0-canary-20231117094453

6 months ago

0.0.0-canary-20230727081153

9 months ago

0.0.0-canary-20230704112725

10 months ago

0.0.0-canary-20231018130022

7 months ago

0.0.0-canary-20231012152601

7 months ago

16.8.0

6 months ago

0.0.0-canary-20230811081638

9 months ago

0.0.0-canary-20231020101520

7 months ago

0.0.0-canary-20230731104935

9 months ago

0.0.0-canary-20230706135851

10 months ago

0.0.0-canary-20230721064032

10 months ago

16.4.1

10 months ago

0.0.0-canary-20231106201932

6 months ago

0.0.0-canary-20230628093418

10 months ago

16.4.0

10 months ago

0.0.0-canary-20230622095539

11 months ago

0.0.0-canary-20230615074404

11 months ago

0.0.0-canary-20230606070758

11 months ago

16.2.1

11 months ago

0.0.0-canary-20230612081719

11 months ago

16.3.0

11 months ago

0.0.0-canary-20230602105252

11 months ago

0.0.0-canary-20230531075415

11 months ago

0.0.0-canary-20230530084740

11 months ago

16.2.0

11 months ago

0.0.0-canary-20230516152727

12 months ago

0.0.0-canary-20230515141330

12 months ago

0.0.0-canary-20230511114942

12 months ago

0.0.0-canary-20230509073057

12 months ago

0.0.0-canary-20230517085655

12 months ago

16.1.1

12 months ago

16.1.0

12 months ago

0.0.0-canary-20230508154656

12 months ago

0.0.0-canary-20230508094010

12 months ago

0.0.0-canary-20230508202228

12 months ago

0.0.0-canary-20230511082947

12 months ago

0.0.0-canary-20230512103300

12 months ago

0.0.0-canary-20230508132441

12 months ago

0.0.0-canary-20230519193855

12 months ago

0.0.0-canary-20230510151703

12 months ago

0.0.0-canary-20230517083811

12 months ago

0.0.0-canary-20230523175950

12 months ago

0.0.0-canary-20230425100705

1 year ago

0.0.0-canary-20230411085857

1 year ago

0.0.0-canary-20230425104503

1 year ago

0.0.0-canary-20230411145007

1 year ago

0.0.0-canary-20230411070924

1 year ago

0.0.0-canary-20230414072753

1 year ago

0.0.0-canary-20230419083933

1 year ago

0.0.0-canary-20230418082825

1 year ago

0.0.0-canary-20230419102851

1 year ago

0.0.0-canary-20230413110907

1 year ago

0.0.0-canary-20230414074305

1 year ago

15.15.0

1 year ago

15.15.1

1 year ago

0.0.0-canary-20230417133401

1 year ago

0.0.0-canary-20230412115514

1 year ago

0.0.0-canary-20230421074713

1 year ago

0.0.0-canary-20230419090337

1 year ago

0.0.0-canary-20230425170452

1 year ago

0.0.0-canary-20230417121433

1 year ago

0.0.0-canary-20230420142611

1 year ago

0.0.0-canary-20230418125532

1 year ago

16.0.0

1 year ago

0.0.0-canary-20230317091919

1 year ago

0.0.0-canary-20230310083908

1 year ago

0.0.0-canary-20230322095716

1 year ago

0.0.0-canary-20230405095946

1 year ago

0.0.0-canary-20230308143554

1 year ago

0.0.0-canary-20230322092815

1 year ago

15.13.2

1 year ago

0.0.0-canary-20230322131309

1 year ago

0.0.0-canary-20230328114311

1 year ago

0.0.0-canary-20230315103223

1 year ago

0.0.0-canary-20230405091338

1 year ago

0.0.0-canary-20230322092658

1 year ago

0.0.0-canary-20230329085321

1 year ago

0.0.0-canary-20230315083610

1 year ago

0.0.0-canary-20230322092742

1 year ago

0.0.0-canary-20230306130648

1 year ago

0.0.0-canary-20230322092547

1 year ago

0.0.0-canary-20230323075708

1 year ago

0.0.0-canary-20230316110348

1 year ago

0.0.0-canary-20230314112821

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-canary-20230321180521

1 year ago

0.0.0-canary-20230316092959

1 year ago

0.0.0-canary-20230405103941

1 year ago

0.0.0-canary-20230330081111

1 year ago

0.0.0-canary-20230309080723

1 year ago

0.0.0-canary-20230228075726

1 year ago

15.13.1

1 year ago

0.0.0-canary-20230302112958

1 year ago

0.0.0-canary-20230301084013

1 year ago

0.0.0-canary-20230227130646

1 year ago

15.13.0

1 year ago

0.0.0-canary-20230227094010

1 year ago

0.0.0-canary-20230223135944

1 year ago

0.0.0-canary-20230224091531

1 year ago

0.0.0-canary-20230223121241

1 year ago

15.12.0

1 year ago

0.0.0-canary-20230222100732

1 year ago

0.0.0-canary-20230215152602

1 year ago

0.0.0-canary-20230222083950

1 year ago

0.0.0-canary-20230216120756

1 year ago

0.0.0-canary-20230210100519

1 year ago

0.0.0-canary-20230210083457

1 year ago

0.0.0-canary-20230210081944

1 year ago

0.0.0-canary-20230209162741

1 year ago

SearchTextInput

Description

Installation

Usage

Properties

Signatures

Signature onSubmit

Signature onReset

data-* props

Static methods

SearchTextInput.isEmpty

Main Functions and use cases are:

Signature `onSubmit`

Signature `onReset`

`data-*` props

`SearchTextInput.isEmpty`