SearchInput

import { useState } from 'react';
import { SearchInput } from 'twenty-ui/components/input';

export const RecordSearch = () => {
  const [value, setValue] = useState('');

  return (
    <SearchInput
      value={value}
      onValueChange={setValue}
      placeholder="Search..."
    />
  );
};

import { useState } from 'react';
import { IconButton, SearchInput } from 'twenty-ui/components/input';
import { Dropdown } from 'twenty-ui/components/navigation';
import { SettingsRow } from 'twenty-ui/components/settings';
import { IconFilter } from 'twenty-ui/icon';

export const FilteredPeopleSearch = () => {
  const [search, setSearch] = useState('');
  const [includeInactive, setIncludeInactive] = useState(false);

  return (
    <SearchInput
      aria-label="Search people"
      placeholder="Name or email"
      value={search}
      onValueChange={setSearch}
      actions={
        <Dropdown.Root type="panel">
          <Dropdown.Trigger
            render={
              <IconButton aria-label="Filter people">
                <IconFilter />
              </IconButton>
            }
          />
          <Dropdown.Content align="end">
            <Dropdown.Section>
              <SettingsRow
                checked={includeInactive}
                onCheckedChange={setIncludeInactive}
              >
                Include inactive people
              </SettingsRow>
            </Dropdown.Section>
          </Dropdown.Content>
        </Dropdown.Root>
      }
    />
  );
};