Search
Search provides a text field with debouncing, loading feedback, and a clear control.
Source
LLM docs
Package
Examples
2
Properties
46
Playground
Basics
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 '@plocks/ui';
export function Demo() {
const [query, setQuery] = useState('');
return (
<Block maw={320} w="100%">
<Search value={query} onChangeText={setQuery} placeholder="Search docs" />
<Text size="xs" c="muted">
Current query: {query || '—'}
</Text>
</Block>
);
}Button mode
Set
buttonMode to turn Search into a pressable launcher — for example onPress={() => spotlight.open()} with @plocks/spotlight — and pass a rightComponent with KeyCap shortcuts so users discover keyboard access.Loading demo…
import { KeyCap, Row, Search, useToast } from '@plocks/ui';
export function Demo() {
const toast = useToast();
return (
<Search
buttonMode
maw={420}
placeholder="Search the workspace"
onPress={() => toast.show({ message: 'Open your search here' })}
rightComponent={(
<Row gap="xs" align="center">
<KeyCap size="xs">⌘</KeyCap>
<KeyCap size="xs">K</KeyCap>
</Row>
)}
/>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources