Search Input

Input prewired with a search glyph, clear control, and Escape-to-empty.

Default

Default size is 40px. Prefix is the search icon; a value reveals the clear button.


        
          1
          
          <SearchInput
        

          2
          
            v-model='query'
        

          3
          
            aria-label='Search'
        

          4
          
            placeholder='Search projects…'
        

          5
          
          />

Sizes

small is 32px. default and medium are 40px. large is 48px.


        
          1
          
          <SearchInput size='small' placeholder='Search…' aria-label='Small' />
        

          2
          
          <SearchInput size='default' placeholder='Search…' aria-label='Default' />
        

          3
          
          <SearchInput size='large' placeholder='Search…' aria-label='Large' />

Command hint

cmdk swaps the clear button for a Meta+K chip. After typing it becomes Esc.

⌘K


        
          1
          
          <SearchInput
        

          2
          
            v-model='cmdkQuery'
        

          3
          
            cmdk
        

          4
          
            aria-label='Search'
        

          5
          
            placeholder='Search projects…'
        

          6
          
          />

Loading

loading replaces the suffix with a spinner so in-flight search stays obvious.


        
          1
          
          <SearchInput
        

          2
          
            v-model='loadingQuery'
        

          3
          
            loading
        

          4
          
            aria-label='Search'
        

          5
          
            placeholder='Search projects…'
        

          6
          
          />

Disabled

⌘K


        
          1
          
          <SearchInput
        

          2
          
            disabled
        

          3
          
            cmdk
        

          4
          
            aria-label='Search'
        

          5
          
            placeholder='Search projects…'
        

          6
          
          />

Custom prefix

Override the magnifier with the prefix slot. Icon data still comes from @hugeicons/core-free-icons.


        
          1
          
          <SearchInput v-model='prefixQuery' aria-label='Ask' placeholder='Ask the assistant…'>
        

          2
          
            <template #prefix>
        

          3
          
              <Icon :icon='SparklesIcon' :size='16' />
        

          4
          
            </template>
        

          5
          
          </SearchInput>

Best practices

Always pass aria-label or a visible label. The glyph is decoration.
Placeholder is a short action, not the field name restated. Search projects…, not Search again.
Keep loading on while results are in flight. Do not swap the whole field for a spinner.
cmdk is for command palettes. Ordinary filters should keep the clear button.
Escape already clears. Do not bind a second Escape handler that fights it.
Use Input when the field is not search. This wrapper is only the search chrome.