SearchInput

@component-controls/components

3.4.5

an input component combined with a popover, can be used for incremental search.

Component

browse

docs

issues

import { SearchInput } from '@component-controls/components';

Overview

browse

docs

issues

() => {
  const [items, setSearch] = useMockData();
  return (
    <SearchInput<FakeItem>
      onSearch={search => setSearch(search)}
      items={items}
      onSelect={item => alert(JSON.stringify(item, null, 2))}
    >
      {props => (
        <Box
          sx={{
            py: 1,
            borderBottom: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
          }}
        >
          {props.item.label}
        </Box>
      )}
    </SearchInput>
  );
}

Properties

	Name	Description	Default
SearchInputOwnProps (6 properties)

	onSearch	callback on change of search input. user can retrieve items in this callback (search: string) => void \| Promise<void>	-
	onSelect	on select a search item. (item: ItemType) => void	-
	children	children is a render prop to allow custom rendering of items, one at a time ((props: SearchBoxCallbackProps<ItemType>) => ReactNode) \| (((props: SearchBoxCallbackProps<ItemType>) => ReactNode) & string) \| ... 5 more ... \| (((props: SearchBoxCallbackProps<...>) => ReactNode) & ReactPortal)	-
	items	items array ItemType[]	[]
	popoverProps	customize the popover PopoverProps	-
	render	custom renver of the search items popup (rendered: ReactNode) => ReactNode	rendered => rendered
InputHTMLAttributes (34 properties)
SpaceProps (28 properties)
HTMLAttributes (43 properties)
Attributes (1 properties)
AriaAttributes (48 properties)
DOMAttributes (159 properties)
BoxOwnProps (4 properties)
BackgroundColorProps (2 properties)
OpacityProps (1 properties)

External dependencies

package	imports	peer
@primer/octicons-react ^10.0.0	SearchIcon
react ^17.0.1	useStateuseEffectReactNode	*
scroll-into-view-if-needed ^2.2.25	scrollIntoView
theme-ui ^0.6.0-alpha.7	jsxInputPropsInputBox

Internal dependencies

file	imports
"../Popover"	PopoverPopoverProps
"../Keyboard"	KeyboardDOWN_ARROWUP_ARROWRETURNESCTAB

Component JSX

Stories

Default Render

browse

docs

issues

() => {
  const [items, setSearch] = useMockData();
  return (
    <SearchInput
      onSearch={search => setSearch(search)}
      items={items}
      onSelect={item => alert(JSON.stringify(item, null, 2))}
    />
  );
}

Placeholder

browse

docs

issues

() => {
  const [items, setSearch] = useMockData();
  return (
    <SearchInput
      onSearch={search => setSearch(search)}
      items={items}
      onSelect={item => alert(JSON.stringify(item, null, 2))}
      placeholder="start typing..."
      aria-label="search items"
    />
  );
}

Customize

browse

docs

issues

() => {
  const [items, setSearch] = useMockData();
  return (
    <SearchInput
      onSearch={search => setSearch(search)}
      items={items}
      render={def => (
        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
          {def}
          <Box sx={{ p: 1 }}>
            Powered by: <GlobeIcon />
          </Box>
        </Box>
      )}
      onSelect={item => alert(JSON.stringify(item, null, 2))}
      aria-label="search items"
    />
  );
}

component-controls/ProgressIndicator

component-controls/Sidebar

Docs

SearchInput

Component

Overview

Properties

External dependencies

Internal dependencies

Component JSX

Stories

Default Render

Placeholder

Customize