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) => { })`

Event Types

Event	React/Angular/Vue
`searchBarOpen`	`(e:CustomEvent)`
`searchBarClose`	`(e:CustomEvent)`

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

Props considerations

When using the components across different frameworks, keep in mind the convention for defining props:

In Vue, Angular and in vanilla JavaScript/HTML (direct Web Component usage), props must be written in kebab-case (e.g., is-required, helper-text).
In React props should be written in camelCase (e.g., isRequired, helperText).

This difference exists because each framework has its own best practices: React follows JavaScript conventions and uses camelCase for props, while Vue, Angular, and direct HTML/Web Components usage rely on kebab-case in templates to align with HTML attribute naming conventions.

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 } 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}
          onAqInput={handleAqInput}
          placeholder="This is a placeholder normal"
        ></AqSearchBar>
	  </>
  );
};