S SV5UI Plus

Quick Example

Search Usage

ตัวอย่าง import และการใช้งานแบบสั้นสำหรับหน้า `search`

Code

                <script lang="ts">
    import { Search } from 'sv5ui-plus'

    const groups = [
        {
            id: 'suggestions',
            label: 'Suggestions',
            items: [
                { value: 'calendar', label: 'Calendar', icon: 'lucide:calendar' },
                { value: 'search-emoji', label: 'Search Emoji', icon: 'lucide:smile' },
                { value: 'calculator', label: 'Calculator', icon: 'lucide:calculator' }
            ]
        }
    ]
</script>

<Search 
    variant="modal" 
    {groups} 
    kbd={['meta', 'K']} 
    placeholder="Search..." 
/>

Search

A flexible search component that can act as a standard input, an icon button, or a global command palette modal (⌘K).

Quick Start

Use variant="modal" to create a "fake" input that triggers a global search modal. This is the modern best practice for application search.

Code

                <script lang="ts">
    import { Search } from 'sv5ui-plus'

    const groups = [
        {
            id: 'suggestions',
            label: 'Suggestions',
            items: [
                { value: 'calendar', label: 'Calendar', icon: 'lucide:calendar' },
                { value: 'search-emoji', label: 'Search Emoji', icon: 'lucide:smile' },
                { value: 'calculator', label: 'Calculator', icon: 'lucide:calculator' }
            ]
        }
    ]
</script>

<Search 
    variant="modal" 
    {groups} 
    kbd={['meta', 'K']} 
    placeholder="Search..." 
/>

Standard Input

Use variant="input" (default) for a standard text input. You can still pass kbd to show a keyboard shortcut visual.

/

Value: empty

Icon Button

Use variant="button" for an icon-only trigger that opens the command modal. Great for mobile navbars.

My App