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

# Entrada de búsqueda

> Texto de búsqueda controlado con acciones opcionales, como una ventana emergente de filtro.

## Resumen

`SearchInput` proporciona un icono de búsqueda y un campo de entrada de texto. `onValueChange` recibe la nueva cadena; `onChange` recibe el evento nativo de cambio de React. El filtrado, la obtención y la eliminación de rebotes pertenecen a tu aplicación.

**Light**

[Ejemplo de SearchInput (light)](https://storybook.twenty.com/iframe.html?id=ui-input-searchinput--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Ejemplo de 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)

## Uso

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

Usa `aria-label` o `aria-labelledby` para un nombre accesible.

Las propiedades nativas de entrada, `className`, `style` y `ref` se aplican al propio campo de entrada. El `InputGroup` compartido se encarga del elemento decorativo de búsqueda y del tratamiento del foco. El contenedor que distribuye el campo y sus acciones no acepta props; coloca `SearchInput` en tu propio contenedor para cambiar su tamaño o posición. Usa `size="sm"` para un campo de búsqueda compacto.

## Acciones

`actions` muestra controles después del campo de búsqueda. Compón una ventana emergente de filtro con un [Dropdown](https://docs.twenty.com/es/ui/components/navigation/dropdown.md) cuyo activador sea un `IconButton` y asigna a ese botón un nombre accesible.

```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` desactiva solo la entrada de texto; desactiva los controles de acción por separado. Con `size="sm"`, pasa `size="sm"` también a los controles de acción.

**Light**

[SearchInput con una ventana emergente de filtro (light)](https://storybook.twenty.com/iframe.html?id=ui-input-searchinput--with-filter\&viewMode=story\&globals=colorScheme:light)

**Dark**

[SearchInput con una ventana emergente de filtro (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)

## "Props"

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