> ## 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

> نص بحث متحكَّم فيه مع إجراءات اختيارية، مثل نافذة منبثقة للتصفية.

## نظرة عامة

يوفر `SearchInput` أيقونة بحث وإدخال نصي. يتلقى `onValueChange` السلسلة الجديدة؛ بينما يتلقى `onChange` حدث التغيير الأصلي في React. تنتمي التصفية والجلب وإزالة الارتداد إلى تطبيقك.

**Light**

[مثال على SearchInput (light)](https://storybook.twenty.com/iframe.html?id=ui-input-searchinput--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال على SearchInput (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-searchinput--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-searchinput--display)

## استخدام

```tsx theme={null}
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..."
    />
  );
};
```

استخدم `aria-label` أو `aria-labelledby` لاسم يمكن الوصول إليه.

تنطبق خصائص الإدخال الأصلية و`className` و`style` و`ref` على الإدخال نفسه. تتولى `InputGroup` المشتركة ملحق البحث ومعالجة التركيز. لا يقبل الغلاف الذي ينسّق الحقل وإجراءاته أي خصائص؛ ضع `SearchInput` في الحاوية الخاصة بك لتحديد حجمه أو موضعه. استخدم `size="sm"` لحقل بحث مضغوط.

## الإجراءات

يعرض `actions` عناصر التحكم بعد حقل البحث. أنشئ نافذة منبثقة للتصفية باستخدام [قائمة منسدلة](https://docs.twenty.com/ar/ui/components/navigation/dropdown.md) يكون مشغّلها `IconButton`، ومنح ذلك الزر اسمًا متاحًا.

```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 (
    <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>
      }
    />
  );
};
```

يعطّل `disabled` إدخال النص فقط؛ عطّل عناصر التحكم الخاصة بالإجراءات بشكل منفصل. عند استخدام `size="sm"`، مرّر `size="sm"` إلى عناصر التحكم الخاصة بالإجراءات أيضًا.

**Light**

[SearchInput مع نافذة منبثقة للتصفية (light)](https://storybook.twenty.com/iframe.html?id=ui-input-searchinput--with-filter\&viewMode=story\&globals=colorScheme:light)

**Dark**

[SearchInput مع نافذة منبثقة للتصفية (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-searchinput--with-filter\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-searchinput--with-filter)

## الإزاحة

**actions** `ReactNode`

Controls rendered after the search field, such as a filter Dropdown. Set their size and accessible names on the controls.

**aria-label** `string`

Accessible name when aria-labelledby is absent.

**aria-labelledby** `string`

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

**autoFocus** `boolean`

Focuses the input when mounted.

**className** `string | ((state: InputState) =\> string | undefined)`

Class applied to the input.

**defaultValue** `string | number | readonly string[]`

The default value of the input. Use when uncontrolled.

**disabled** `boolean`

Disables the text input. Controls in actions keep their own state.

**hasFocusRing** `boolean` (default: false)

Shows the group focus border. Defaults to false for all search inputs. Set true to opt in. Error styling remains visible.

**id** `string`

Input ID, generated when omitted.

**onChange** `((event: BaseUIEvent\<ChangeEvent\<HTMLInputElement, HTMLInputElement\>\>) =\> void)`

Native input change event handler.

**onValueChange** `((value: string, eventDetails: \{ reason: "none"; event: Event; cancel: () =\> void; allowPropagation: () =\> void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; \}) =\> void)`

Called with the new text. The application owns filtering.

**placeholder** `string`

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

**ref** `Ref\<HTMLInputElement\>`

Ref to the native input element.

**render** `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.

**size** `"md" | "sm"` (default: md)

Visual size of the input group.

**style** `CSSProperties | ((state: InputState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

**textAlign** `"end" | "start"`

Aligns text to the logical start or end of the input. Follows the text direction.

**value** `string | number | readonly string[]`

Current search text.


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