SearchModal
A command palette style search modal.
SearchModal renders a focused overlay with a text input designed for fuzzy searching through a list of items. It is highly inspired by traditional Command Palettes (Cmd+K menus) found in modern editors.
Usage
import { SearchModal, Box, Text } from 'caret-tui';
import { useState } from 'react';
const items = [
{ label: 'Create New File', value: 'create_file', category: 'File' },
{ label: 'Save All', value: 'save_all', category: 'File' },
{ label: 'Toggle Terminal', value: 'toggle_term', category: 'View' }
];
const App = () => {
const [open, setOpen] = useState(true);
return (
<Box>
<Text>Press Esc to close</Text>
<SearchModal
isOpen={open}
onClose={() => setOpen(false)}
onSelect={(val) => console.log('Selected:', val)}
items={items}
placeholder="Search for an action..."
/>
</Box>
);
};Props
| Prop | Type | Default | Description |
|---|---|---|---|
isOpen | boolean | - | Controls the visibility of the modal. |
onClose | () => void | - | Callback fired when the user presses Esc. |
onSelect | (value: string) => void | - | Callback fired when an item is selected via Enter. |
items | SearchItem[] | - | The list of items to search through. |
placeholder | string | "Search commands..." | Text to display when the input is empty. |
SearchItem Definition
| Field | Type | Description |
|---|---|---|
label | string | The text displayed in the search list. |
value | string | The underlying value returned by onSelect. |
category | string | Optional categorization tag displayed next to the label. |