SearchInput

@coinbase/cds-web@8.34.1

A control for searching a dataset.

Import

import { SearchInput } from '@coinbase/cds-web/controls/SearchInput'

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Related components

• TextInput

---

󰏖

View as Markdown

Basic usage

Loading...

󰙡

Live Code

function BasicSearchInput() {
  const [value, setValue] = useState('');
  return (
    <VStack gap={2}>
      <SearchInput
        value={value}
        onChangeText={setValue}
        onClear={() => setValue('')}
        onSearch={(searchTerm) => console.log('Searching for:', searchTerm)}
        placeholder="Search..."
      />
      <Text color="foregroundMuted" font="caption">
        Press Enter to trigger search
      </Text>
    </VStack>
  );
}

Variants

Loading...

󰙡

Live Code

function SearchInputVariants() {
  const [value1, setValue1] = useState('');
  const [value2, setValue2] = useState('');
  const [value3, setValue3] = useState('');

  return (
    <VStack gap={2}>
      <SearchInput
        value={value1}
        onChangeText={setValue1}
        onClear={() => setValue1('')}
        placeholder="Compact search..."
        compact
      />
      <SearchInput
        value={value2}
        onChangeText={setValue2}
        onClear={() => setValue2('')}
        placeholder="Borderless search..."
        bordered={false}
      />
      <SearchInput
        value={value3}
        onChangeText={setValue3}
        onClear={() => setValue3('')}
        placeholder="No icons..."
        hideStartIcon
        hideEndIcon
      />
    </VStack>
  );
}

With Custom End Element

Loading...

󰙡

Live Code

function CustomEndSearchInput() {
  const [value, setValue] = useState('');
  return (
    <SearchInput
      value={value}
      onChangeText={setValue}
      onClear={() => setValue('')}
      placeholder="Custom end element..."
      end={<InputIconButton name="filter" onClick={() => console.log('Filter clicked')} />}
    />
  );
}