#SearchModal

A command-palette dialog opened with Cmd+K (Ctrl+K on Windows/Linux). Provides a search input, grouped item lists, keyboard navigation, and a footer with keyboard hints. Content is consumer-assembled: the component is a composable shell, not a hard-wired feature.

Source · Storybook

#Usage

import { ChevronRight, Plus, Search, Users } from '@wallarm-org/design-system/icons';
import { SearchModal, SearchModalBody, SearchModalContent, SearchModalEmpty, SearchModalFooter, SearchModalGroup, SearchModalGroupLabel, SearchModalInput, SearchModalItem } from '@wallarm-org/design-system/SearchModal';
import { Text } from '@wallarm-org/design-system/Text';
import { WallyIcon } from '@wallarm-org/design-system/WallyIcon';

#Examples

#Empty recents

A new user with no history. The Recent section shows "Nothing recent yet" instead of items. Matches PRD state 2.

#Sub list

A sub-list page pushed in place of the main body. Used for "Create\u2026" and "Switch tenant". The footer changes to show "esc back" and "enter to select". Demonstrates PRD states 6 and 7.

#Items as links

Items rendered as links via asChild, for cases where results navigate to a URL.

#Disabled items

Disabled items are excluded from keyboard navigation and cannot be selected.

#Close on select false

closeOnSelect={false} keeps the modal open after selecting an item, useful for multi-step flows like the sub-list mechanic.

#Controlled

Controlled open state, driven entirely from outside the component. No SearchModalTrigger — the button calls setOpen directly.

#Scrollable

The scrollable body when there are many items. The input and footer stay fixed while the body scrolls.

#Props

#SearchModalBody

#SearchModalContent

#SearchModalEmpty

#SearchModalFooter

#SearchModalGroup

#SearchModalGroupLabel

#SearchModalInput

#SearchModalItem

#SearchModalTrigger

#Explorer