# How to disable search button when no text is entered on search input field and enable when text is entered

**URL:** <https://discuss.elastic.co/t/how-to-disable-search-button-when-no-text-is-entered-on-search-input-field-and-enable-when-text-is-entered/286869>\
**Category:** Elastic Search\
**Created:** [October 15, 2021, 6:52pm UTC](https://discuss.elastic.co/t/how-to-disable-search-button-when-no-text-is-entered-on-search-input-field-and-enable-when-text-is-entered/286869 "2021-10-15T18:52:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\
**Post date:** [October 15, 2021, 6:52pm UTC](https://discuss.elastic.co/t/how-to-disable-search-button-when-no-text-is-entered-on-search-input-field-and-enable-when-text-is-entered/286869/1 "2021-10-15T18:52:20Z")

</div>

am using the below code. but unable to disable it when search term is having data.  
how to achieve this ?

```auto
<SearchBox
  inputView={({ getAutocomplete, getInputProps, getButtonProps }) => (
    <>
      <div className="sui-search-box__wrapper">
        <input
          {...getInputProps({
            placeholder: "I am a custom placeholder"
          })}
        />
        {getAutocomplete()}
      </div>
      <input
        {...getButtonProps({
          "data-custom-attr": "some value"
        })}
      />
    </>
  )}
/>

```

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [October 15, 2021, 8:30pm UTC](https://discuss.elastic.co/t/how-to-disable-search-button-when-no-text-is-entered-on-search-input-field-and-enable-when-text-is-entered/286869/2 "2021-10-15T20:30:15Z")

</div>

Something like this should work...

```auto
<SearchProvider config={config}>
  <WithSearch mapContextToProps={({ wasSearched }) => ({ wasSearched })}>
    {({ wasSearched }) => (
      //...
      <SearchBox
        inputView={({ getAutocomplete, getInputProps, getButtonProps }) => (
          <>
            <div className="sui-search-box__wrapper">
              <input
                {...getInputProps({
                  placeholder: "I am a custom placeholder"
                })}
               disabled={wasSearched}
              />

```

---

<div class="post-metadata">

**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\
**Post date:** [October 15, 2021, 9:02pm UTC](https://discuss.elastic.co/t/how-to-disable-search-button-when-no-text-is-entered-on-search-input-field-and-enable-when-text-is-entered/286869/3 "2021-10-15T21:02:51Z")

</div>

> [@JasonStoltz](#):
>
> `disabled={wasSearched}`

adding that to the input props disabling entering into input field. But i need to disable button so i added inside button and that didnt work.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [November 4, 2022, 8:32am UTC](https://discuss.elastic.co/t/how-to-disable-search-button-when-no-text-is-entered-on-search-input-field-and-enable-when-text-is-entered/286869/4 "2022-11-04T08:32:42Z")

</div>