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

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-20241028125808

8 months ago

0.0.0-preview-FCT-1187-20241024123200

8 months ago

0.0.0-preview-FCT-1187-20241021190428

8 months ago

19.13.0

8 months ago

0.0.0-canary-20241014160150

8 months ago

0.0.0-canary-20241009193324

8 months ago

0.0.0-canary-20240925165851

9 months ago

0.0.0-canary-20241003145429

8 months ago

0.0.0-canary-20241010130729

8 months ago

0.0.0-canary-20241009071024

8 months ago

0.0.0-canary-20241001174409

9 months ago

0.0.0-canary-20241002142715

8 months ago

0.0.0-canary-20241011135231

8 months ago

0.0.0-canary-20241002130953

8 months ago

0.0.0-canary-20241003153231

8 months ago

0.0.0-canary-20241002142913

8 months ago

0.0.0-canary-20241003151043

8 months ago

0.0.0-canary-20241010162605

8 months ago

19.12.1

8 months ago

0.0.0-canary-20240925171250

9 months ago

0.0.0-canary-20241010205637

8 months ago

0.0.0-canary-20241009175534

8 months ago

0.0.0-canary-20240924122353

9 months ago

0.0.0-canary-20240924135022

9 months ago

0.0.0-canary-20240925133422

9 months ago

0.0.0-canary-20240918073948

9 months ago

0.0.0-canary-20240902123520

9 months ago

0.0.0-preview-test-preview-publishing-20240918183346

9 months ago

0.0.0-canary-20240917143329

9 months ago

0.0.0-canary-20240918181700

9 months ago

0.0.0-canary-20240917153604

9 months ago

0.0.0-canary-20240918160237

9 months ago

0.0.0-canary-20240916085337

9 months ago

0.0.0-canary-20240920133329

9 months ago

19.12.0

9 months ago

0.0.0-canary-20240916105227

9 months ago

0.0.0-preview-test-preview-publishing-with-commit-trigger-20240919120649

9 months ago

0.0.0-preview-test-preview-publishing-with-commit-trigger-20240919103642

9 months ago

19.11.0

9 months ago

19.8.0

11 months ago

19.10.0

10 months ago

0.0.0-canary-20240530100629

1 year ago

0.0.0-canary-20240805095513

10 months ago

19.7.0

11 months ago

0.0.0-canary-20240527065236

1 year ago

19.6.0

12 months ago

0.0.0-canary-20240621090426

12 months ago

0.0.0-canary-20240626090327

12 months ago

0.0.0-canary-20240625115755

12 months ago

19.5.0

1 year ago

0.0.0-canary-20240604125216

1 year ago

0.0.0-canary-20240617063324

12 months ago

0.0.0-canary-20240604163856

1 year ago

0.0.0-canary-20240621133126

12 months ago

0.0.0-canary-20240603111514

1 year ago

0.0.0-canary-20240524063948

1 year ago

0.0.0-canary-20240807084212

10 months ago

0.0.0-canary-20240604151817

1 year ago

19.4.0

1 year ago

0.0.0-canary-20240625124027

12 months ago

0.0.0-canary-20240522094639

1 year ago

0.0.0-canary-20240531145120

1 year ago

0.0.0-canary-20240723124651

11 months ago

0.0.0-canary-20240726072030

11 months ago

0.0.0-canary-20240725110422

11 months ago

0.0.0-canary-20240719104735

11 months ago

0.0.0-canary-20240604153622

1 year ago

0.0.0-canary-20240522101026

1 year ago

0.0.0-canary-20240715071321

11 months ago

0.0.0-canary-20240604115928

1 year ago

0.0.0-canary-20240807112850

10 months ago

19.9.0

11 months ago

0.0.0-canary-20240716102951

11 months ago

0.0.0-canary-20240619142933

12 months ago

0.0.0-canary-20240617084426

12 months ago

0.0.0-canary-20240521130632

1 year ago

0.0.0-canary-20240625081125

12 months ago

0.0.0-canary-20240617073522

12 months ago

0.0.0-canary-20240520083557

1 year ago

0.0.0-canary-20240517151402

1 year ago

0.0.0-canary-20240517123809

1 year ago

0.0.0-canary-20240514135306

1 year ago

0.0.0-canary-20240513101556

1 year ago

0.0.0-canary-20240513120348

1 year ago

19.3.1

1 year ago

0.0.0-canary-20240508080213

1 year ago

19.3.0

1 year ago

0.0.0-canary-20240508074817

1 year ago

0.0.0-canary-20240507115053

1 year ago

0.0.0-canary-20240503144721

1 year ago

0.0.0-canary-20240503111328

1 year ago

0.0.0-canary-20240502134907

1 year ago

0.0.0-canary-20240502125854

1 year ago

0.0.0-canary-20240429110037

1 year ago

0.0.0-canary-20240429095712

1 year ago

0.0.0-canary-20240429151613

1 year ago

19.2.0

1 year ago

0.0.0-canary-20240429080049

1 year ago

0.0.0-canary-20240426091858

1 year ago

0.0.0-canary-20240425084041

1 year ago

0.0.0-canary-20240424133322

1 year ago

0.0.0-canary-20240424125820

1 year ago

0.0.0-canary-20240424172230

1 year ago

0.0.0-canary-20240423075704

1 year ago

0.0.0-canary-20240422074013

1 year ago

0.0.0-canary-20240417141019

1 year ago

0.0.0-canary-20240417152832

1 year ago

19.1.0

1 year ago

0.0.0-canary-20240416080627

1 year ago

0.0.0-canary-20240416122003

1 year ago

0.0.0-canary-20240415155633

1 year ago

0.0.0-canary-20240415154231

1 year ago

0.0.0-canary-20240412080035

1 year ago

0.0.0-canary-20240411070250

1 year ago

0.0.0-canary-20240409155122

1 year ago

0.0.0-canary-20240408094037

1 year ago

0.0.0-canary-20240408081653

1 year ago

0.0.0-canary-20240408075655

1 year ago

0.0.0-canary-20240408082643

1 year ago

0.0.0-canary-20240408083654

1 year ago

0.0.0-canary-20240404141323

1 year ago

0.0.0-canary-20240401115502

1 year ago

0.0.0-canary-20240326165038

1 year ago

19.0.0

1 year ago

0.0.0-canary-20240322105825

1 year ago

0.0.0-canary-20240321125808

1 year ago

0.0.0-canary-20240321141818

1 year ago

0.0.0-canary-20240321085855

1 year ago

0.0.0-canary-20240321154822

1 year ago

0.0.0-canary-20240320080808

1 year ago

0.0.0-canary-20240319155008

1 year ago

0.0.0-canary-20240319081838

1 year ago

0.0.0-canary-20240319084420

1 year ago

0.0.0-canary-20240319084832

1 year ago

18.5.0

1 year ago

0.0.0-canary-20240318154412

1 year ago

0.0.0-canary-20240318073724

1 year ago

0.0.0-canary-20240311155934

1 year ago

18.4.0

1 year ago

0.0.0-canary-20240311163353

1 year ago

0.0.0-canary-20240229082531

1 year ago

0.0.0-canary-20240229120215

1 year ago

18.3.0

1 year ago

0.0.0-canary-20240222103400

1 year ago

18.2.0

1 year ago

0.0.0-canary-20240221114521

1 year ago

0.0.0-canary-20240219160124

1 year ago

18.1.0

1 year ago

0.0.0-canary-20240214142237

1 year ago

0.0.0-canary-20240214093533

1 year ago

18.0.0

1 year ago

0.0.0-canary-20240213091505

1 year ago

0.0.0-canary-20240212084750

1 year ago

0.0.0-canary-20240212173604

1 year ago

0.0.0-canary-20240209081746

1 year ago

0.0.0-canary-20240208102915

1 year ago

0.0.0-canary-20240207115036

1 year ago

17.1.0

1 year ago

0.0.0-canary-20240206161325

1 year ago

0.0.0-canary-20240202080838

1 year ago

0.0.0-canary-20240131162657

1 year ago

0.0.0-canary-20240131092002

1 year ago

0.0.0-canary-20240130102905

1 year ago

0.0.0-canary-20240129162718

1 year ago

17.0.1

1 year ago

0.0.0-canary-20240123154713

1 year ago

0.0.0-canary-20240118123543

1 year ago

17.0.0

1 year ago

0.0.0-canary-20240118125451

1 year ago

0.0.0-canary-20240117152032

1 year ago

0.0.0-canary-20240116201138

1 year ago

0.0.0-canary-20240116164945

1 year ago

0.0.0-canary-20240112093529

1 year ago

0.0.0-canary-20240109150004

1 year ago

0.0.0-canary-20231229075922

1 year ago

0.0.0-canary-20231221092239

1 year ago

0.0.0-canary-20231219120012

1 year ago

0.0.0-canary-20231219120942

1 year ago

0.0.0-canary-20231219122613

1 year ago

0.0.0-canary-20231219074106

1 year ago

0.0.0-canary-20231214155242

1 year ago

16.12.1

2 years ago

0.0.0-canary-20231204132537

2 years ago

0.0.0-canary-20231204104818

2 years ago

0.0.0-canary-20231128120330

2 years ago

0.0.0-canary-20231128121512

2 years ago

0.0.0-canary-20231128090613

2 years ago

16.12.0

2 years ago

0.0.0-canary-20230927101743

2 years ago

0.0.0-canary-20230926074140

2 years ago

0.0.0-canary-20230824090411

2 years ago

0.0.0-canary-20230731114902

2 years ago

0.0.0-canary-20230731102408

2 years ago

0.0.0-canary-20230822093959

2 years ago

0.0.0-canary-20231120163956

2 years ago

16.9.0

2 years ago

0.0.0-canary-20230802081825

2 years ago

0.0.0-canary-20230721071347

2 years ago

16.11.0

2 years ago

0.0.0-canary-20230705071834

2 years ago

0.0.0-canary-20230919074955

2 years ago

0.0.0-canary-20230922090152

2 years ago

0.0.0-canary-20231020071712

2 years ago

0.0.0-canary-20230919064630

2 years ago

0.0.0-canary-20231023144936

2 years ago

0.0.0-canary-20230823133527

2 years ago

0.0.0-canary-20230731113035

2 years ago

0.0.0-canary-20231020172218

2 years ago

16.5.0

2 years ago

0.0.0-canary-20230908094846

2 years ago

0.0.0-canary-20231020070159

2 years ago

0.0.0-canary-20230713133803

2 years ago

0.0.0-canary-20230927090022

2 years ago

0.0.0-canary-20231012155352

2 years ago

0.0.0-canary-20230811122631

2 years ago

0.0.0-canary-20230901092912

2 years ago

0.0.0-canary-20230921130022

2 years ago

16.10.0

2 years ago

16.6.1

2 years ago

0.0.0-canary-20231120183429

2 years ago

0.0.0-canary-20231010104830

2 years ago

0.0.0-canary-20231109141457

2 years ago

16.6.0

2 years ago

0.0.0-canary-20230831113711

2 years ago

0.0.0-canary-20230713101815

2 years ago

0.0.0-canary-20231107092719

2 years ago

0.0.0-canary-20231002082126

2 years ago

0.0.0-canary-20230713135809

2 years ago

0.0.0-canary-20231030124826

2 years ago

0.0.0-canary-20231023153427

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-canary-20231117123740

2 years ago

0.0.0-canary-20231114154535

2 years ago

0.0.0-canary-20230817081120

2 years ago

0.0.0-canary-20230719081123

2 years ago

0.0.0-canary-20230830124456

2 years ago

0.0.0-canary-20231114065040

2 years ago

0.0.0-canary-20231020094744

2 years ago

0.0.0-canary-20231107090630

2 years ago

0.0.0-canary-20230817075326

2 years ago

0.0.0-canary-20230821101457

2 years ago

0.0.0-canary-20231117094453

2 years ago

0.0.0-canary-20230727081153

2 years ago

0.0.0-canary-20230704112725

2 years ago

0.0.0-canary-20231018130022

2 years ago

0.0.0-canary-20231012152601

2 years ago

16.8.0

2 years ago

0.0.0-canary-20230811081638

2 years ago

0.0.0-canary-20231020101520

2 years ago

0.0.0-canary-20230731104935

2 years ago

0.0.0-canary-20230706135851

2 years ago

0.0.0-canary-20230721064032

2 years ago

16.4.1

2 years ago

0.0.0-canary-20231106201932

2 years ago

0.0.0-canary-20230628093418

2 years ago

16.4.0

2 years ago

0.0.0-canary-20230622095539

2 years ago

0.0.0-canary-20230615074404

2 years ago

0.0.0-canary-20230606070758

2 years ago

16.2.1

2 years ago

0.0.0-canary-20230612081719

2 years ago

16.3.0

2 years ago

0.0.0-canary-20230602105252

2 years ago

0.0.0-canary-20230531075415

2 years ago

0.0.0-canary-20230530084740

2 years ago

16.2.0

2 years ago

0.0.0-canary-20230516152727

2 years ago

0.0.0-canary-20230515141330

2 years ago

0.0.0-canary-20230511114942

2 years ago

0.0.0-canary-20230509073057

2 years ago

0.0.0-canary-20230517085655

2 years ago

16.1.1

2 years ago

16.1.0

2 years ago

0.0.0-canary-20230508154656

2 years ago

0.0.0-canary-20230508094010

2 years ago

0.0.0-canary-20230508202228

2 years ago

0.0.0-canary-20230511082947

2 years ago

0.0.0-canary-20230512103300

2 years ago

0.0.0-canary-20230508132441

2 years ago

0.0.0-canary-20230519193855

2 years ago

0.0.0-canary-20230510151703

2 years ago

0.0.0-canary-20230517083811

2 years ago

0.0.0-canary-20230523175950

2 years ago

0.0.0-canary-20230425100705

2 years ago

0.0.0-canary-20230411085857

2 years ago

0.0.0-canary-20230425104503

2 years ago

0.0.0-canary-20230411145007

2 years ago

0.0.0-canary-20230411070924

2 years ago

0.0.0-canary-20230414072753

2 years ago

0.0.0-canary-20230419083933

2 years ago

0.0.0-canary-20230418082825

2 years ago

0.0.0-canary-20230419102851

2 years ago

0.0.0-canary-20230413110907

2 years ago

0.0.0-canary-20230414074305

2 years ago

15.15.0

2 years ago

15.15.1

2 years ago

0.0.0-canary-20230417133401

2 years ago

0.0.0-canary-20230412115514

2 years ago

0.0.0-canary-20230421074713

2 years ago

0.0.0-canary-20230419090337

2 years ago

0.0.0-canary-20230425170452

2 years ago

0.0.0-canary-20230417121433

2 years ago

0.0.0-canary-20230420142611

2 years ago

0.0.0-canary-20230418125532

2 years ago

16.0.0

2 years ago

0.0.0-canary-20230317091919

2 years ago

0.0.0-canary-20230310083908

2 years ago

0.0.0-canary-20230322095716

2 years ago

0.0.0-canary-20230405095946

2 years ago

0.0.0-canary-20230308143554

2 years ago

0.0.0-canary-20230322092815

2 years ago

15.13.2

2 years ago

0.0.0-canary-20230322131309

2 years ago

0.0.0-canary-20230328114311

2 years ago

0.0.0-canary-20230315103223

2 years ago

0.0.0-canary-20230405091338

2 years ago

0.0.0-canary-20230322092658

2 years ago

0.0.0-canary-20230329085321

2 years ago

0.0.0-canary-20230315083610

2 years ago

0.0.0-canary-20230322092742

2 years ago

0.0.0-canary-20230306130648

2 years ago

0.0.0-canary-20230322092547

2 years ago

0.0.0-canary-20230323075708

2 years ago

0.0.0-canary-20230316110348

2 years ago

0.0.0-canary-20230314112821

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-canary-20230321180521

2 years ago

0.0.0-canary-20230316092959

2 years ago

0.0.0-canary-20230405103941

2 years ago

0.0.0-canary-20230330081111

2 years ago

0.0.0-canary-20230309080723

2 years ago

0.0.0-canary-20230228075726

2 years ago

15.13.1

2 years ago

0.0.0-canary-20230302112958

2 years ago

0.0.0-canary-20230301084013

2 years ago

0.0.0-canary-20230227130646

2 years ago

15.13.0

2 years ago

0.0.0-canary-20230227094010

2 years ago

0.0.0-canary-20230223135944

2 years ago

0.0.0-canary-20230224091531

2 years ago

0.0.0-canary-20230223121241

2 years ago

15.12.0

2 years ago

0.0.0-canary-20230222100732

2 years ago

0.0.0-canary-20230215152602

2 years ago

0.0.0-canary-20230222083950

2 years ago

0.0.0-canary-20230216120756

2 years ago

0.0.0-canary-20230210100519

2 years ago

0.0.0-canary-20230210083457

2 years ago

0.0.0-canary-20230210081944

2 years ago

0.0.0-canary-20230209162741

2 years 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`