SearchInput

SearchInput supplies a search icon and text input. onChange receives the new string. Filtering, fetching, and debouncing belong to your application.

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

export const PeopleSearch = () => {
  const [search, setSearch] = useState('');

  return (
    <SearchInput
      aria-label="Search people"
      placeholder="Name or email"
      value={search}
      onChange={setSearch}
    />
  );
};

Use aria-label or aria-labelledby for an accessible name. filterDropdown receives a filter button that you can compose with a Dropdown trigger using render. Supply filterButtonAriaLabel to name that action. disabled disables the text input; configure the optional filter controls separately.

Props

string

Accessible name when aria-labelledby is absent.

string

ID of the element that labels the input. Takes precedence over aria-label.

boolean

Focuses the input when mounted.

string

Class applied to the wrapper.

boolean

Disables the text input. Configure filter popup controls separately.

string

default:"Filter"

Accessible label for the optional filter button.

Renders a filter popup around the supplied filter button.

string

Input ID, generated when omitted.

(value: string) => void

required

Called with the new text, not a DOM change event. The application owns filtering.

string

Hint shown when the input is empty. Also used as the accessible name if no explicit label is supplied.

string

required

Current search text.

Overview

Apps

API

Self-Host

Contribute

UI Library

Props

​Props

Props