Back to Primitives

SearchField

1:1Forms
View on GitHub

Search input with clear action.

Example
Usage
import { SearchField } from '@/components/polaris';

function Example() {
    return <SearchField label="Search" placeholder="Search products..." />;
}
Component Source
import { forwardRef, createElement } from 'react';

type Props = JSX.IntrinsicElements['s-search-field'];

/**
 * SearchField component - text input with search icon.
 *
 * @example
 * <SearchField label="Search" placeholder="Search products..." />
 */
export const SearchField = forwardRef<HTMLElement, Props>((props, ref) =>
    createElement('s-search-field', { ref, ...props })
);

SearchField.displayName = 'SearchField';