Site settings
Change the appearance of the site to suit your preferences
SearchInput
Search inputs are useful when searching through content
A basic search input
<SearchInput label="Search" />
A controlled search input
() => { const [query, setQuery] = React.useState(""); return ( <SearchInput label="Search" value={query} onChange={e => setQuery(e.target.value)} /> ); }
A search input with a reset button
() => { const [query, setQuery] = React.useState(""); return ( <SearchInput label="Search" value={query} onChange={e => setQuery(e.target.value)} onReset={() => setQuery("")} /> ); }
Different variants
<Stack gap={3}> <SearchInput label="Base" /> <SearchInput label="Floating" variant="floating" /> </Stack>