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

Query: Empty

Usage

import { useState } from 'react';
import { NSearchField } from '@nayan-ui/react';


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


  return (
    <NSearchField
      value={query}
      onChange={setQuery}
      placeholder="Search components..."
    />
  );
};


export default SearchField;

Attributes

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.
isDisabledbooleanfalseDisables the search field.
isInvalidbooleanfalseMarks as invalid.
variant'primary' | 'secondary''primary'Visual variant.
fullWidthbooleanfalseFull width mode.
classNamestring' 'Additional CSS classes.

Tags

React Search FieldReact Search InputReact Search BarReact Search ComponentReact Clearable SearchReact Search Box