Inputs and selection

Search field

NativeWeb

Input + search icon + clear

The native kit's real component, live in its web build at phone width. Follows this site's theme.

API

<SearchField value onChangeText placeholder />

Get it

Already in every copy of the native kit:

import { SearchField } from '@/components/kit/search-field';

Details

Exports: SearchField
Source: apps/mobile/components/kit/search-field.tsx
Packages: lucide-react-native@^1.21.0
Installs with: @kit-native/icon, @kit-native/input, @kit-native/lib-utils
Also searched as: search bar, find
Registry JSON: /r/native/search-field.json

The web kit's real component, live. Follows this site's theme.

API

<SearchField value onChangeText placeholder />

Get it

Already in every copy of the web kit:

import { SearchField } from '@/components/kit/search-field';

Details

Exports: SearchField
Source: apps/web/components/kit/search-field.tsx
Packages: cn@^0.4.0, lucide-react@^1.52.0
Installs with: input
Also searched as: search, filter box
Registry JSON: /r/web/search-field.json

Agents: the whole registry is at /llms.txt.

Segmented controlNativeWeb

Previous Page

Quantity stepperNativeWeb

Next Page