Search

The Search component provides a search input with debouncing, loading states, and customizable clear functionality.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽²⁾

Properties

⁽³¹⁾

Playground

Basic search

Control the Search value with local state so you can react to user input and mirror the query elsewhere in your UI.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Search
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
query
,
 setQuery
]
 
=
 
useState
(
''
)
;
 
  
return
 
(
    
<Block
 
maxW
=
{
320
}
 
w
=
"100%"
>
      
<Search
 
value
=
{
query
}
 
onChange
=
{
setQuery
}
 
placeholder
=
"Search docs"
 
/>
      
<Text
 
size
=
"xs"
 
color
=
"muted"
>
        
Current
 query
:
 
{
query 
||
 
'—'
}
      
</Text
>
    
</Block
>
  
)
;
}

Button mode

Set buttonMode to turn Search into a pressable launcher and pass a rightComponent with KeyCap shortcuts so users discover keyboard access.

Loading demo…

import
 
{
 
Block
,
 
KeyCap
,
 
Row
,
 
Search
,
 
Text
,
 useToast 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 toast 
=
 
useToast
(
)
;
 
  
const
 handleCustomPress 
=
 
(
)
 
=>
 
{
    toast
.
show
(
{
 message
:
 
'Launching saved search…'
 
}
)
;
  
}
;
 
  
return
 
(
    
<Block
 
maxW
=
{
420
}
 
w
=
"100%"
>
      
<Block
>
        
<Text
 
size
=
"xs"
 
color
=
"muted"
>
          
Default
 
Spotlight
 launcher
        
</Text
>
        
<Search
          buttonMode
          
placeholder
=
"Search the workspace"
          
rightComponent
=
{
(
            
<Row
 
gap
=
"xs"
 
align
=
"center"
>
              
<KeyCap
 
size
=
"xs"
>
⌘
</KeyCap
>
              
<KeyCap
 
size
=
"xs"
>
K
</KeyCap
>
            
</Row
>
          
)
}
        
/>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"xs"
 
color
=
"muted"
>
          
Custom
 handler with shortcut hint
        
</Text
>
        
<Search
          buttonMode
          
placeholder
=
"Search analytics"
          
onPress
=
{
handleCustomPress
}
          
rightComponent
=
{
(
            
<Row
 
gap
=
"xs"
 
align
=
"center"
>
              
<KeyCap
 
size
=
"xs"
 
variant
=
"outline"
>
                
Ctrl
              
</KeyCap
>
              
<KeyCap
 
size
=
"xs"
 
variant
=
"outline"
>
                
F
              
</KeyCap
>
            
</Row
>
          
)
}
        
/>
      
</Block
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Search

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap