Filter Search

Dynamic search

Dynamic search searches as soon as at least one character is entered into the input.

tsx

import React from 'react';
import Input from 'intergalactic/input';
import CloseM from 'intergalactic/icon/Close/m';
import Search from 'intergalactic/icon/Search/m';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('');

  const handleChange = React.useCallback(
    (v) => {
      setValue(v);
    },
    [value],
  );

  const handleClick = React.useCallback(() => {
    setValue('');
  }, ['']);

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='dynamic-search-filter-by-keyword'>
        Filter by keyword
      </Text>
      <Input w={200} mt={2} aria-live='polite'>
        <Input.Addon>
          <Search />
        </Input.Addon>
        <Input.Value
          value={value}
          onChange={handleChange}
          id='dynamic-search-filter-by-keyword'
          placeholder='Enter keyword here'
        />
        {value && (
          <Input.Addon tag={CloseM} interactive onClick={handleClick} aria-label='Clear filter' />
        )}
      </Input>
    </Flex>
  );
};

export default Demo;

import React from 'react';
import Input from 'intergalactic/input';
import CloseM from 'intergalactic/icon/Close/m';
import Search from 'intergalactic/icon/Search/m';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('');

  const handleChange = React.useCallback(
    (v) => {
      setValue(v);
    },
    [value],
  );

  const handleClick = React.useCallback(() => {
    setValue('');
  }, ['']);

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='dynamic-search-filter-by-keyword'>
        Filter by keyword
      </Text>
      <Input w={200} mt={2} aria-live='polite'>
        <Input.Addon>
          <Search />
        </Input.Addon>
        <Input.Value
          value={value}
          onChange={handleChange}
          id='dynamic-search-filter-by-keyword'
          placeholder='Enter keyword here'
        />
        {value && (
          <Input.Addon tag={CloseM} interactive onClick={handleClick} aria-label='Clear filter' />
        )}
      </Input>
    </Flex>
  );
};

export default Demo;

Search by button

Slow but accurate user assistant, searches by button or by pressing Enter.

tsx

import React from 'react';
import Input from 'intergalactic/input';
import CloseM from 'intergalactic/icon/Close/m';
import Search from 'intergalactic/icon/Search/m';
import Button from 'intergalactic/button';
import NeighborLocation from 'intergalactic/neighbor-location';
import { Text } from 'intergalactic/typography';
import { Flex, Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('');

  const handleChange = React.useCallback(
    (v) => {
      setValue(v);
    },
    [value],
  );

  const handleClick = React.useCallback(() => {
    setValue('');
  }, ['']);

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='search-by-button-filter-by-keyword'>
        Filter by keyword
      </Text>
      <Box mt={2}>
        <NeighborLocation>
          <Input w={200}>
            <Input.Value
              value={value}
              onChange={handleChange}
              id='search-by-button-filter-by-keyword'
              placeholder='Enter keyword here'
            />
            {value && (
              <Input.Addon
                tag={CloseM}
                interactive
                onClick={handleClick}
                aria-label='Clear filter'
              />
            )}
          </Input>
          <Button aria-label='Search'>
            <Button.Addon>
              <Search />
            </Button.Addon>
          </Button>
        </NeighborLocation>
      </Box>
    </Flex>
  );
};

export default Demo;

import React from 'react';
import Input from 'intergalactic/input';
import CloseM from 'intergalactic/icon/Close/m';
import Search from 'intergalactic/icon/Search/m';
import Button from 'intergalactic/button';
import NeighborLocation from 'intergalactic/neighbor-location';
import { Text } from 'intergalactic/typography';
import { Flex, Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('');

  const handleChange = React.useCallback(
    (v) => {
      setValue(v);
    },
    [value],
  );

  const handleClick = React.useCallback(() => {
    setValue('');
  }, ['']);

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='search-by-button-filter-by-keyword'>
        Filter by keyword
      </Text>
      <Box mt={2}>
        <NeighborLocation>
          <Input w={200}>
            <Input.Value
              value={value}
              onChange={handleChange}
              id='search-by-button-filter-by-keyword'
              placeholder='Enter keyword here'
            />
            {value && (
              <Input.Addon
                tag={CloseM}
                interactive
                onClick={handleClick}
                aria-label='Clear filter'
              />
            )}
          </Input>
          <Button aria-label='Search'>
            <Button.Addon>
              <Search />
            </Button.Addon>
          </Button>
        </NeighborLocation>
      </Box>
    </Flex>
  );
};

export default Demo;

Search with select

An extremely rare dynamic search, we use it when fine-tuning of this filter is needed, since there is a lot of different kinds of data.

tsx

import React from 'react';
import Input from 'intergalactic/input';
import CloseM from 'intergalactic/icon/Close/m';
import Search from 'intergalactic/icon/Search/m';
import Button from 'intergalactic/button';
import NeighborLocation from 'intergalactic/neighbor-location';
import Select from 'intergalactic/select';
import { Text } from 'intergalactic/typography';
import { Flex, Box } from 'intergalactic/flex-box';

const selectOptions = ['Option 1', 'Option 2'];

const Demo = () => {
  const [value, setValue] = React.useState('');

  const options = selectOptions.map((option) => ({
    value: option,
    children: option,
  }));

  const handleChange = React.useCallback(
    (v) => {
      setValue(v);
    },
    [value],
  );

  const handleClick = React.useCallback(() => {
    setValue('');
  }, ['']);

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='search-with-select-filter-by-keyword'>
        Filter by keyword
      </Text>
      <Box mt={2}>
        <NeighborLocation>
          <Select placeholder='Everywhere' options={options} />
          <Input w={200}>
            <Input.Value
              ml={2}
              value={value}
              onChange={handleChange}
              id='search-with-select-filter-by-keyword'
              placeholder='Enter keyword here'
            />
            {value && (
              <Input.Addon
                tag={CloseM}
                interactive
                onClick={handleClick}
                aria-label='Clear filter'
              />
            )}
          </Input>
          <Button aria-label='Search'>
            <Button.Addon>
              <Search />
            </Button.Addon>
          </Button>
        </NeighborLocation>
      </Box>
    </Flex>
  );
};

export default Demo;

import React from 'react';
import Input from 'intergalactic/input';
import CloseM from 'intergalactic/icon/Close/m';
import Search from 'intergalactic/icon/Search/m';
import Button from 'intergalactic/button';
import NeighborLocation from 'intergalactic/neighbor-location';
import Select from 'intergalactic/select';
import { Text } from 'intergalactic/typography';
import { Flex, Box } from 'intergalactic/flex-box';

const selectOptions = ['Option 1', 'Option 2'];

const Demo = () => {
  const [value, setValue] = React.useState('');

  const options = selectOptions.map((option) => ({
    value: option,
    children: option,
  }));

  const handleChange = React.useCallback(
    (v) => {
      setValue(v);
    },
    [value],
  );

  const handleClick = React.useCallback(() => {
    setValue('');
  }, ['']);

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='search-with-select-filter-by-keyword'>
        Filter by keyword
      </Text>
      <Box mt={2}>
        <NeighborLocation>
          <Select placeholder='Everywhere' options={options} />
          <Input w={200}>
            <Input.Value
              ml={2}
              value={value}
              onChange={handleChange}
              id='search-with-select-filter-by-keyword'
              placeholder='Enter keyword here'
            />
            {value && (
              <Input.Addon
                tag={CloseM}
                interactive
                onClick={handleClick}
                aria-label='Clear filter'
              />
            )}
          </Input>
          <Button aria-label='Search'>
            <Button.Addon>
              <Search />
            </Button.Addon>
          </Button>
        </NeighborLocation>
      </Box>
    </Flex>
  );
};

export default Demo;

Accessibility

Writing code

CSS Injection

Dynamic search

Search by button

Search with select

Accessibility

CSS Injection

Filter Search

Dynamic search ​

Search by button ​

Search with select ​

Dynamic search

Search by button

Search with select