Search Field

A Search Field component is a UI element that provides a text input specifically designed for search functionality. It includes a built-in search icon and clear button, allowing users to quickly enter, modify, and clear search queries.

Demo

Rendered live, with the same build of the library you install.

Query: Empty

Usage

Source
SearchField.tsx
import { useState } from 'react';
import { NSearchField } from '@nayan-ui/react';


const SearchField = () => {
  const [query, setQuery] = useState('');


  return (
    <div>
      <div className="space-y-4 max-w-sm">
        <NSearchField value={query} onChange={setQuery} placeholder="Search components..." />
        <p className="text-sm text-muted">Query: {query || 'Empty'}</p>
      </div>
    </div>
  );
};


export default SearchField;

Attributes

11 props
NameTypeDefaultDetails
valuestringOptionalControlled value.
defaultValuestringOptionalDefault value.
onChange(value: string) => voidOptionalCallback when value changes.
onSubmit(value: string) => voidOptionalCallback on submit.
onClear() => voidOptionalCallback when cleared.
placeholderstring'Search...'Placeholder text.
disabledbooleanfalseDisables the search field.
isInvalidbooleanfalseMarks as invalid.
variant'primary' | 'secondary''primary'Visual variant.
fullWidthbooleanfalseFull width mode.
classNamestring' 'Additional CSS classes.

Tags

Other components solving nearby problems.