SearchInput

searchinput-1779393692701.tsx

'use client'
import { useState } from 'react'

export default function SearchInput({ placeholder = 'Search...', onSearch }) {
  const [value, setValue] = useState('')
  const [focused, setFocused] = useState(false)
  const handleChange = (e) => {
    setValue(e.target.value)
    onSearch?.(e.target.value)
  }
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: '10px',
      background: '#f8fafc', border: '2px solid ' + (focused ? '#6366f1' : '#e2e8f0'),
      borderRadius: '12px', padding: '10px 14px', transition: 'all 0.2s',
      boxShadow: focused ? '0 0 0 4px rgba(99,102,241,0.15)' : 'none',
    }}>
      <span style={{ color: '#94a3b8', fontSize: '18px' }}>🔍</span>
      <input
        value={value}
        onChange={handleChange}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        placeholder={placeholder}
        style={{
          flex: 1, border: 'none', background: 'transparent',
          outline: 'none', fontSize: '15px', color: '#1e293b',
        }}
      />
      {value && (
        <button onClick={() => { setValue(''); onSearch?.('') }} style={{
          background: '#e2e8f0', border: 'none', borderRadius: '50%',
          width: '20px', height: '20px', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: '12px', color: '#64748b',
        }}>×</button>
      )}
    </div>
  )
}

Component info

CategoryInputs & Forms

Frameworkreact

TierFREE

Copies0

About

Search input with icon, clear button and animated focus state

More from Inputs & Forms

'use client';

import { useState, useEffect } from 'react';

interface Tag {
  id: number;
  name: string;
}

const TagInput = () => {
  const [tags, setTags] = useState<Tag[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [suggest

TagInput

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface File {
  name: string;
  size: number;
  progress: number;
}

const FileUpload = () => {
  const [dragOver, setDragOver] = useState(false);
  const [files, setFiles] = useState<File[]

FileUpload

Inputs & Forms

import React, { useState } from 'react';

const OTPInput = () => {
  const [otp, setOtp] = useState(new Array(6).fill(''));
  const [activeIndex, setActiveIndex] = useState(0);

  const handleChange = (e, index) => {
    const value = e.target.value;

OTPInput

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface RangeSliderProps {
  min: number;
  max: number;
  defaultValue: [number, number];
}

const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, defaultValue }) => {
  const [minVal

RangeSlider

Inputs & Forms