Search Field
BsSearchField is a component that let users enter search keyword into an UI.
Overview
BsSearchField is standalone input field component that let users enter search keywords. This component is usually placed on the Navbar or anywhere on a page that is easy to see.
BsSearchField mimics the HTML5 <input> element. This means that you can add attributes like readonly, or disabled and it will react to them to give the best experience. You can also use v-model directive to create two-way data bindings on the model-value property. Additionally, you can listen to the search event to handle the search task based on the given keyword.
IMPORTANT
Do not use the model-value property when using v-model.
Dark Mode
You can configure <bs-search-field> to adapts to the container background color by explicitly define the dark-mode property.
Custom Search
<bs-search-field> component can also be used to build custom search by explicitly define the advance-search property. Then use the popover slot to build a custom form elements for the custom search. <bs-search-field> uses BsPopover internally to handle the custom form elements.
CSS Variables
As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-field-searchbox for better customization.
.md-field-searchbox {
--md-searchbox-bg: oklch(0 0 0 / 0.025);
--md-searchbox-color: currentColor;
--md-searchbox-active-bg: oklch(100% 0 0);
--md-searchbox-active-border-color: var(--md-field-active-indicator);
--md-searchbox-border-color: oklch(0 0 0 / 0.07);
--md-searchbox-border-width: thin;
--md-searchbox-border-radius: var(--md-radius);
--md-searchbox-font-size: var(--font-size-default);
--md-searchbox-font-weight: var(--font-weight-normal);
--md-searchbox-padding-x: 0.375rem;
--md-searchbox-padding-y: 0.375rem;
--md-searchbox-focused-shadow: color-mix(in oklch, var(--md-field-active-indicator), transparent 75%);
}