ariaExpanded aria to be set if the popup is open.
- Set object ariaHasPopup aria to be set the sarch result popup's type.
boolean "true" "false" "menu" "listbox" "tree" "grid" "dialog"
- autoComplete Configures the browser's autocomplete feature for the search input.
"off"
Set string autoFocus If true, the search input is automatically focused when the component mounts.
- Set boolean className - Set string clearIconLabel Label for the clear icon button, for accessibility purposes.
"Clear"
Set string clearIconName Name of the icon used for the clear button.
- Choose option... MinusSmall ClassicFolder AlignRight AlignLeft AlignCenter MoveArrowLeftNarrow CollapseHorizontally MoveArrowRightNarrow Files WarningFull Move Downgrade ScheduledEmail PinFull ThumbsDown Clipboard Forward Shuffle Upgrade Key CloseMedium ReplyAll Baseline ItemHeightSingle ItemHeightDouble Prompt Heart Placeholder Translation Warning SortDescending SortAscending Erase Workflow ContentDirectory Form Launch NotificationsMuted Connect Idea Forum Education Academy Offline Timeline Tags Dropdown Country MondayDoc MoveArrowLeftDouble Formula ItemDefaultValues ConnectedDoc AddNewDoc Switcher Description LearnMore ItemHeightTriple TextMedium NavigationDoubleChevronLeft Night Mirror Minimize Layout DocTemplate ConvertToItem TextCopy Open Expand ConvertToSubitem Clear TextColorIndicator Bug Battery Status Subitems Gantt Counter Widgets Recurring DueDate Dependency Custom Basic Work MoreBelowFilled MoreBelow CollapseRound CloseRound Bulllet MoreActions Apps Globe Radio LongText ShortText Activity Add AddSmall AddUpdate Alert Announcement API Archive Attach BlockQuote Board BoardPrivate BoardShareable BoardTemplate Bold Bolt Broadcast Broom Bullets Bullet Bookmark Calendar Chart Check Checkbox CheckList Close CloseSmall Code Collapse Column Comment Completed CreditCard Cut Dashboard DashboardPrivate Delete DisabledUser Divider Doc DocPrivate DocShareable DoubleCheck Download Drag DropdownChevronDown DropdownChevronLeft DropdownChevronRight DropdownChevronUp Duplicate Edit Email Embed Enter Event Emoji ExternalPage Favorite Feedback File Filter Folder Fullscreen Graph FullscreenClose Gallery GIF Group Guest Help Health Hide Highlight HighlightColorBucket Home Image Inbox Info Integrations Invite IPRestrictions Italic Item Keyboard Labs Lines Link Location Locked LogIn LogOut Mention Menu Microphone Mobile MondayLogoOutline Moon MoveArrowDown MoveArrowLeft MoveArrowRight MoveArrowUp Mute MyWeek NavigationChevronDown NavigationChevronLeft NavigationChevronRight NavigationChevronUp NewTab NoColor Note Notifications Numbers Page Paste Pause Person Pin Play Print PushNotification Quote RecycleBin Redo Remove Reply Retry Robot Rotate Search Security Send Settings SettingsKnobs Share Show Shredder Sort Sound StrikethroughS StrikethroughT Sun Switch Table Team Text TextBig Textcolor TextHuge TextSmall ThumbsUp Time Underline TurnInto Undo Unlocked Update Upload Versioning Video Wand WhatsNew Workspace Deactivate AddToTeam PersonRound UserDomain UserStatus currentAriaResultId ARIA property that identifies the currently active item within the search results.
- Set string data-testid - Set string debounceRate Rate at which search input changes are debounced.
400
Set number disabled If true, the search input is disabled and cannot be interacted with.
- Set boolean hideRenderActionOnInput If true, hides the additional action when the user types in the search input.
- Set boolean id - Set string inputAriaLabel Aria-label for the search input, important for accessibility.
- Set string loading Shows a loading indicator in the search component, typically used while fetching results.
- Set boolean onBlur Callback function that is called when the search input loses focus.
(event: FocusEvent<Element, Element>) => void
- - onChange Callback function that is called whenever the value of the search input changes.
(value: string) => void
- - onClear Callback function that is called when the clear button is clicked.
() => void
- - onFocus Callback function that is called when the search input gains focus.
(event: FocusEvent<Element, Element>) => void
- - onKeyDown Callback function that is called when a keyboard key is down.
(event: KeyboardEvent<HTMLInputElement>) => void
- - placeholder Placeholder text for the search input when it's empty.
- renderAction Render additional action within the right section of search component.
ReactElement<(((VibeComponent<IconButtonProps & RefAttributes<HTMLElement>, HTMLElement> & Partial<{ sizes: { ...; }; kinds: typeof ButtonType; colors: typeof ButtonColor; }>) | (FC<...> & Partial<...>)) & Required<...>) | (((VibeComponent<...> & Partial<...>) | (FC<...> & Partial<...>)) & Required<...>), string | J...
- Set object searchIconName Name of the icon used for the search button.
- Choose option... MinusSmall ClassicFolder AlignRight AlignLeft AlignCenter MoveArrowLeftNarrow CollapseHorizontally MoveArrowRightNarrow Files WarningFull Move Downgrade ScheduledEmail PinFull ThumbsDown Clipboard Forward Shuffle Upgrade Key CloseMedium ReplyAll Baseline ItemHeightSingle ItemHeightDouble Prompt Heart Placeholder Translation Warning SortDescending SortAscending Erase Workflow ContentDirectory Form Launch NotificationsMuted Connect Idea Forum Education Academy Offline Timeline Tags Dropdown Country MondayDoc MoveArrowLeftDouble Formula ItemDefaultValues ConnectedDoc AddNewDoc Switcher Description LearnMore ItemHeightTriple TextMedium NavigationDoubleChevronLeft Night Mirror Minimize Layout DocTemplate ConvertToItem TextCopy Open Expand ConvertToSubitem Clear TextColorIndicator Bug Battery Status Subitems Gantt Counter Widgets Recurring DueDate Dependency Custom Basic Work MoreBelowFilled MoreBelow CollapseRound CloseRound Bulllet MoreActions Apps Globe Radio LongText ShortText Activity Add AddSmall AddUpdate Alert Announcement API Archive Attach BlockQuote Board BoardPrivate BoardShareable BoardTemplate Bold Bolt Broadcast Broom Bullets Bullet Bookmark Calendar Chart Check Checkbox CheckList Close CloseSmall Code Collapse Column Comment Completed CreditCard Cut Dashboard DashboardPrivate Delete DisabledUser Divider Doc DocPrivate DocShareable DoubleCheck Download Drag DropdownChevronDown DropdownChevronLeft DropdownChevronRight DropdownChevronUp Duplicate Edit Email Embed Enter Event Emoji ExternalPage Favorite Feedback File Filter Folder Fullscreen Graph FullscreenClose Gallery GIF Group Guest Help Health Hide Highlight HighlightColorBucket Home Image Inbox Info Integrations Invite IPRestrictions Italic Item Keyboard Labs Lines Link Location Locked LogIn LogOut Mention Menu Microphone Mobile MondayLogoOutline Moon MoveArrowDown MoveArrowLeft MoveArrowRight MoveArrowUp Mute MyWeek NavigationChevronDown NavigationChevronLeft NavigationChevronRight NavigationChevronUp NewTab NoColor Note Notifications Numbers Page Paste Pause Person Pin Play Print PushNotification Quote RecycleBin Redo Remove Reply Retry Robot Rotate Search Security Send Settings SettingsKnobs Share Show Shredder Sort Sound StrikethroughS StrikethroughT Sun Switch Table Team Text TextBig Textcolor TextHuge TextSmall ThumbsUp Time Underline TurnInto Undo Unlocked Update Upload Versioning Video Wand WhatsNew Workspace Deactivate AddToTeam PersonRound UserDomain UserStatus searchResultsContainerId The id of the container element where search results are to be displayed.
- Set string showClearIcon Controls the visibility of the clear icon.
true
Set boolean size Size of the input element. Will influence also padding and font size.
"medium"
small medium large
value The value of the search input.
- Set string