SearchInput

function Example() {
  const [value, setValue] = useState('');
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {['surface', 'field', 'menu', 'soft', 'pill'].map((variant) => (
        <SearchInput
          key={variant}
          variant={variant}
          value={value}
          onValueChange={setValue}
          placeholder={`Поиск · ${variant}`}
        />
      ))}
    </div>
  );
}

render(<Example />);