> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# SearchInput

> Controlled search text with an optional filter popup.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`SearchInput` supplies a search icon and text input. `onValueChange` receives the new string; `onChange` receives the native React change event. Filtering, fetching, and debouncing belong to your application.

```tsx theme={null}
import { useState } from 'react';
import { SearchInput } from 'twenty-ui/components/input';

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

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

Use `aria-label` or `aria-labelledby` for an accessible name. `filterDropdown` receives a filter button that you can compose with a [Dropdown](/ui/components/navigation/dropdown) trigger using `render`. Supply `filterButtonAriaLabel` to name that action. `disabled` disables the text input; configure the optional filter controls separately.

<StoryEmbed storyId="ui-input-searchinput--default" title="SearchInput example" height={280} />

Native input props, `className`, `style`, and `ref` apply to the input itself. The shared `InputGroup` owns the search adornment and focus treatment. Use `size="sm"` for a compact search field.

## Props

<ParamField body="aria-label" type="string">
  Accessible name when aria-labelledby is absent.
</ParamField>

<ParamField body="aria-labelledby" type="string">
  ID of the element that labels the input. Takes precedence over aria-label.
</ParamField>

<ParamField body="autoFocus" type="boolean">
  Focuses the input when mounted.
</ParamField>

<ParamField body="className" type="string | ((state: InputState) => string | undefined)">
  Class applied to the input.
</ParamField>

<ParamField body="defaultValue" type="string | number | readonly string[]">
  The default value of the input. Use when uncontrolled.
</ParamField>

<ParamField body="disabled" type="boolean">
  Disables the text input. Configure filter popup controls separately.
</ParamField>

<ParamField body="filterButtonAriaLabel" type="string" default="Filter">
  Accessible label for the optional filter button.
</ParamField>

<ParamField body="filterDropdown" type="((filterButton: ReactElement<unknown, string | JSXElementConstructor<any>>) => ReactNode)">
  Renders a filter popup around the supplied filter button.
</ParamField>

<ParamField body="id" type="string">
  Input ID, generated when omitted.
</ParamField>

<ParamField body="onChange" type="((event: BaseUIEvent<ChangeEvent<HTMLInputElement, HTMLInputElement>>) => void)">
  Native input change event handler.
</ParamField>

<ParamField body="onValueChange" type="((value: string, eventDetails: { reason: &#x22;none&#x22;; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)">
  Called with the new text. The application owns filtering.
</ParamField>

<ParamField body="placeholder" type="string">
  Hint shown when the input is empty. Also used as the accessible name if no explicit label is supplied.
</ParamField>

<ParamField body="ref" type="Ref<HTMLInputElement>">
  Ref to the native input element.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, InputState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="size" type="&#x22;md&#x22; | &#x22;sm&#x22;" default="md">
  Visual size of the input group and optional filter button.
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: InputState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="value" type="string | number | readonly string[]">
  Current search text.
</ParamField>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.