> ## 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 optional actions, such as a filter popup.
export const StoryEmbed = ({storyId, title, height = 120}) => <>
Open in Storybook
;
`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.
## Usage
```tsx theme={null}
import { useState } from 'react';
import { SearchInput } from 'twenty-ui/components/input';
export const RecordSearch = () => {
const [value, setValue] = useState('');
return (
);
};
```
Use `aria-label` or `aria-labelledby` for an accessible name.
Native input props, `className`, `style`, and `ref` apply to the input itself. The shared `InputGroup` owns the search adornment and focus treatment. The wrapper that lays out the field and its actions takes no props; place `SearchInput` in your own container to size or position it. Use `size="sm"` for a compact search field.
## Actions
`actions` renders controls after the search field. Compose a filter popup with a [Dropdown](/ui/components/navigation/dropdown) whose trigger is an `IconButton`, and give that button an accessible name.
```tsx theme={null}
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 (
}
/>
Include inactive people
}
/>
);
};
```
`disabled` disables only the text input; disable action controls separately. With `size="sm"`, pass `size="sm"` to the action controls as well.
## Props
Controls rendered after the search field, such as a filter Dropdown. Set their size and accessible names on the controls.
Accessible name when aria-labelledby is absent.
ID of the element that labels the input. Takes precedence over aria-label.
Focuses the input when mounted.
Class applied to the input.
The default value of the input. Use when uncontrolled.
Disables the text input. Controls in actions keep their own state.
Input ID, generated when omitted.
Native input change event handler.
Called with the new text. The application owns filtering.
Hint shown when the input is empty. Also used as the accessible name if no explicit label is supplied.
Ref to the native input element.
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.
Visual size of the input group.
Style applied to the element, or a function that
returns a style object based on the component's state.
Current search text.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.