COMPONENTS / MOLECULES / al-search← ALL COMPONENTS

Search

<al-search><ALSearch> REACTbeta

Reference generated from the custom elements manifest — 21 properties, 4 slots, 1 events.

PLAYGROUND9 CONTROLS

PREVIEW / al-search / ALTITUDE

Loading preview

List item 1

List item 2

List item 3

List item 4

List item 5

List item 6

List item 7

List item 8

List item 9

List item 10

position

FLAGS

CODE — HTML / REACT

Guidance

NOT YET AUTHORED · 20 COMPONENTS COVERED

NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.

FIGMA PARITYALTITUDE DESIGN SYSTEM

NOT IN FIGMAAltitude Design System

This component exists in code and has no Figma component set.

DECIDED BY: NEVER SYNCED
FIGMA SIDE: NEVER OBSERVED
LAST CONFIRMED SYNC: NEVER
PUBLIC SURFACE: 21 ATTR · 4 SLOT · 1 EVENT · 0 PART

The two sides have never been confirmed equal, so there is no baseline to compare against.

ACCESSIBILITYAXE 4.12.1

CHECKEVIDENCEDETAILRESULT

Default stateAXEsearch--DefaultPASS

Advanced statesAXE6 further storiesPASS

Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED

Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED

MEASURED 2026-09-08 · 7 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA

COLOR CONTRAST1 RULE FAILING

The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.

RULEWHEREELEMENTS

color-contrastElements must meet minimum color contrast ratio thresholdssearch--Disabled1

INSTALL@southleft/al-web-components/components/search

import '@southleft/al-web-components/components/search';
import { ALSearch } from '@southleft/al-react';

API — 21 PROPS21 DOCUMENTED

PROPTYPEDEFAULT

ariaControlsIdstringThe unique id of the field—

fieldIdstringThe unique id of the field—

labelstringLabel of the form field'Search'

fieldNotestringDescription for the field—

errorNotestringError message for the field—

hideLabelbooleanVisually hide the label from the UI—

buttonTextstringSearch button text—

clearButtonTextstringClear button text'Clear text'

isDisabledbooleanDisabled attribute—

isActivebooleanActive statefalse

isActiveDropdownbooleanActive statefalse

isErrorbooleanError state—

placeholderstringPlaceholder text'Find asset'

valuestringInput value—

ariaDescribedBystringAria describedby 1. Used to connect the field note and errorNote for accessibility—

isDynamicbooleanis Dynamic—

position'bottom' | 'top'Position property'bottom'

maxlengthnumberMaxlength of characters for the search—

isFocusedInbooleanFocused in menu toggle—

isEmptybooleanUse this Flag along with emptyMessage named slot to report error message—

ariaActiveDescendantIdstringActive element in the dropdown panel 1. This is used to read out the active value to the user—

SLOTS4

SLOTDESCRIPTION

emptyMessageContent displayed when there are no matching results.

(default)The search's dropdown content

field-noteIf content is slotted, it will display in place of the fieldNote property

errorIf content is slotted, it will display in place of the errorNote property

EVENTS1

EVENTDESCRIPTIONTYPE

onSearchChangeFired when the search query changes. Detail: `{ value }`.CustomEvent

PUBLIC METHODS12

METHODDESCRIPTION

closePanel()Close dropdown panel

setLists()When the component first loads 1. If the dropdown has a list as children, add the proper aria attributes to the `list` and `list-item` slotted components to get proper accessibility

clearSearch()Clear the input field on click 1. Set active, clear and error to false after click 2. Clear the input value after click 3. Set the focus on the input after the clear 4.

handleOnClickOutside()Handle click outside the component 1. Close the show hide panel on click outside 2) If the nav is already closed then we don't care about outside clicks and we can bail early 3. By the time a user clicks on the page the shadowRoot will almost certainly be defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly undefined. To work around that we'll check that we have a shadowRoot (and a rendered .host) element here to appease the TypeScript compiler. This should never actually be shown or run for a human end user. 4. Check to see if we clicked inside the active panel 5. If the panel is active and we've clicked outside of the panel then it should be closed.

toggleActive()Set menu active state 1. Toggle the active state between true and false 2. If the active state is turned on, set focus to the first element in the dropdown panel 3. If the active state is toggled to false, close the panel and return focus to the dropdown trigger 4. If the event target has a value (list-item has value prop), then replace the input value with the list-item value

focusOnFirstItem()Select first item in dropdown 1. Set the current selected item to the first item of the dropdown list 2. Add `aria-selected` to first item to show selected state in listbox dropdown 3. Change the `aria-activedescendant` value in input to the id of the selected item

focusOnLastItem()Select last item in dropdown 1. Set the current selected item to the last item of the dropdown list 2. Add `aria-selected` to last item to show selected state in listbox dropdown 3. Change the `aria-activedescendant` value in input to the id of the selected item

removeAriaSelected()Remove aria selected 1. Remove aria-selected from all list items and set currentSelectedItem to none

updateScroll()Update the scroll of the dropdown panel body 1)If selected item is not defined, the dropdown panel scroll is set to top 2. If the current selected item is defined and dropdown panel scrollHeight is greater than the clientHeight, then calculate the scroll distance from the bottom of the panel. Also calculate the bottom of the element. 3. If the bottom of the list is greater than the scroll bottom, scroll the panel the difference between the bottom of the element and dropdown panel body client height. 4. If the current selected item offset top is less than the dropdown panel body scroll top, then scroll the list to the top.

handleKeyDown()Handle on keydown 1. If the dropdown panel is open and escape is keyed, close the menu and return focus to the trigger button 2. If the dropdown panel is active but not arrowed into yet and arrow down (or arrow up when dropdown is above search) is keyed, move the `aria-selected` state into the first list item. A while condition is added, so that if there are disabled list items in panel, then it will be skipped and the focus will be kept to the first non-disabled list item. 3. Otherwise, if the item is focused in, run various keydown events 4. When focused in panel and tabbed, focus on the clear button in the input 5. When focused in panel and enter is selected on item in dropdown, change the value to the list-item value prop and 6. If current selected item has previous element and arrow up is selected, move `aria-selected to the previous item 7. Otherwise, if If current selected item has next element and arrow down is selected, move `aria-selected to the next item 8. Otherwise, if 6 isn't true when arrow up is selected when first item is aria-selected, then return the `aria-selected` state to the last item 9. Otherwise, if 7 isn't true and arrow down is selected when last item is aria-seleected, then return the `aria-selected` state to the first item 10. If the dropdown panel is active but not arrowed into yet and tab is keyed, move focus to the clear button and remove 11. Update the panel scroll when the item is focused on. 12. while condition added so that, it checks if the PreviousElementsibling is disabled or not. If disabled, then it keeps looping until it finds the previous non-disabled list-item. If it reaches the top , and if there is no such non-disabled items, then focusOnLastitem is called so that the focus returns back to the last non-disabled item. 13. while condition added so that, it checks if the nextElementsibling is disabled or not. If disabled, then it keeps looping until it finds the next non-disabled list-item. If it reaches the end , and if there is no such non-disabled items, then focusOnFirstitem is called so that the focus returns back to the first non-disabled item. 14. Use control + option + spacebar to trigger the dropdown without typing

handleKeyUp()Handle key up 1. Remove the multi-key-selection on key up after keydown combo is selected

dynamicPosition()Handle all dynamic placement 1. Get the botom position of the body 2. Get the bottom of the input and height of the list in the dropdown to add together 3. If the bottom of the input position plus the list height > bottom position of the body, render the dropdown on top of the input 4. Otherwise, render the dropdown below

SOURCE — components/search/search.ts · Molecules/Form/Search