Aqua Basis

The AqSearchBar component provides a quick way for users to search and locate information within an application or website. It can switch between an input field and a button-style view, making it ideal for headers, toolbars, or other layouts where space is limited.

<aq-search-bar
  id="aq-search-bar"
  placeholder="This is a placeholder normal"
  is-button
>
</aq-search-bar>

Props and Attributes

Prop / Attr	Type	Default	Descripción
`placeholder`	`string`	`''`	Placeholder text when the input is emply
`isLoading`	`boolean`	`false`	If `true`, forces the button view and display loading in `<aq-button>`.
`isDisabled`	`boolean`	`false`	If `true`, the text entry is disabled, and the search bar is rendered as a button instead of an input field.
`isButton`	`boolean`	`false`	If `true`, the search bar is rendered as a button instead of an input field.

If false, the search bar is rendered as an input field.

Note: The component alternates this value when opening/closing. |

💡Note: When isLoading or isDisabled are active, the input is not displayed even if isButton is false.

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-forms-aqsearchbar--default&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Events

Event	Description	React	Angular	Vue	Vanilla JS
`searchBarOpen`	Triggered when the click on the button	`searchBarOpen={handleChange}`	`(searchBarOpen)="handleChange($event)"`	`@searchBarOpen="handleChange"`	`addEventListener('searchBarOpen', (event) => { })`
`searchBarClose`	Triggered when the click on `aq-text-field`	`searchBarClose={handleChange}`	`(searchBarClose)="handleChange($event)"`	`@searchBarClose="handleChange"`	`addEventListener('searchBarClose', (event) => { })`
`input`	Triggered when the editor content is changed.	`onInput={handleInput}`	`(input)="handleInput($event)"`	`@input="handleInput"`	`addEventListener('input', handler)`
`change`	Triggered when the input value changes and loses focus (final value committed).	`onChange={handleChange}`	`(change)="handleChange($event)"`	`@change="handleChange"`	`addEventListener('change', handler)`

Event Types

Event	React	Angular	Vue
`searchBarOpen`	`(e:CustomEvent)`	`(e:CustomEvent)`	`(e:CustomEvent)`
`searchBarClose`	`(e:CustomEvent)`	`(e:CustomEvent)`	`(e:CustomEvent)`
`input`	`(e: React.ChangeEvent<HTMLAqSearchBarElement>)`	`(e:Event)`	`(e:CustomEvent<{ value: string }>)`
`change`	`(e: React.ChangeEvent<HTMLAqSearchBarElement>)`	`(e:Event)`	`(e:CustomEvent<{ value: string }>)`

Binding Support by Framework

Framework	Two-Way Binding Support	Example	Notes
Vue 3	✅ `v-model`	`v-model="textSearchBar"`	Works with `ref` binding and emits updates
Angular	✅ `[(ngModel)]`	`[(ngModel)]="textSearchBar”`	Requires FormsModule or standalone setup
React	⚠️ Manual
Web Components	⚠️ Manual

In Frameworks

Web Components

<aq-search-bar
id="aq-search-bar"
placeholder='This is a placeholder normal'
is-button>
</aq-search-bar>

<script>
  const checkbox = document.getElementById('chk');
  
  checkbox.addEventListener('change', (event) => {
    console.log('Checkbox change ', event);
  });
</script>

Vue

<script lang="ts">
import { AqSearchBar} from '@aqua-ds/vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  components: {
    AqSearchBar
  },
  setup() {
    const textSearchBar = ref('');
    const searchBarOpen = (e: CustomEvent) => {
      console.log('searchBarClose', e);
    };
    const searchBarClose = (e: CustomEvent) => {
      console.log('searchBarClose', e);
    };
    const isButton= ref(false);
    return {
      textSearchBar,
      searchBarClose,
      searchBarOpen,
      isButton,
    };
  }
});

</script>

<template>
	<div>
		<aq-search-bar
        @searchBarClose="searchBarClose"
        @searchBarOpen="searchBarOpen"
        placeholder="This is a placeholder normal"
        v-model="textSearchBar"
        :is-button="isButton"
      ></aq-search-bar>
		<span>{{ textSearchBar }}</span>
  </div> 
</template>

React

import { AqSearchBar } from "@aqua-ds/react";
import { useState } from "react";

export const SearchBarSet = () => {
  const [textSearchBar, setTextSearchBar] = useState('');

  const searchBarOpen = (e: CustomEvent) => {
    console.log('searchBarClose', e);
  };
  const searchBarClose = (e: CustomEvent) => {
    console.log('searchBarClose', e);
  };

  const handleAqInput = (e: CustomEvent) => {
    setTextSearchBar(e.target.value);
  };
  
  
  return (
	  <>
		   <AqSearchBar
          onSearchBarClose={searchBarClose}
          onSearchBarOpen={searchBarOpen}
          value={textSearchBar}
          onInput={handleAqInput}
          placeholder="This is a placeholder normal"
        ></AqSearchBar>
	  </>
  );
};