Search 搜索框

用于搜索内容的输入组件，支持即时搜索和按钮触发。

基础用法

import { Search } from '@airo-ui/react'

function Demo() {
  return (
    <Search
      placeholder="搜索..."
      onSearch={(value) => console.log('搜索:', value)}
    />
  )
}

受控与非受控

import { useState } from 'react'
import { Search } from '@airo-ui/react'

function ControlledDemo() {
  const [value, setValue] = useState('')

  return (
    <Search
      value={value}
      onChange={setValue}
      placeholder="受控搜索"
      onSearch={(val) => console.log('搜索:', val)}
    />
  )
}

function UncontrolledDemo() {
  return (
    <Search
      defaultValue="初始值"
      placeholder="非受控搜索"
      onSearch={(val) => console.log('搜索:', val)}
    />
  )
}

搜索按钮

import { Search } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Search placeholder="默认按钮" searchButton onSearch={(v) => console.log(v)} />
      <Search placeholder="自定义文本" searchButton="查找" onSearch={(v) => console.log(v)} />
    </>
  )
}

加载状态

import { Search } from '@airo-ui/react'

function Demo() {
  return (
    <Search
      placeholder="正在搜索..."
      loading
      onSearch={(v) => console.log(v)}
    />
  )
}

可清空

import { Search } from '@airo-ui/react'

function Demo() {
  return (
    <Search
      placeholder="可清空搜索"
      clearable
      onSearch={(v) => console.log(v)}
      onClear={() => console.log('已清空')}
    />
  )
}

尺寸

import { Search } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Search size="sm" placeholder="小尺寸" onSearch={(v) => console.log(v)} />
      <Search size="md" placeholder="中尺寸" onSearch={(v) => console.log(v)} />
      <Search size="lg" placeholder="大尺寸" onSearch={(v) => console.log(v)} />
    </>
  )
}

API

Props

名称	类型	默认值	说明
value	string	—	受控模式当前值
onChange	(value: string) => void	—	值变化时触发
placeholder	string	—	占位文本
disabled	boolean	false	是否禁用
clearable	boolean	false	是否可清空
loading	boolean	false	加载状态
size	'sm' | 'md' | 'lg'	'md'	尺寸
searchButton	boolean | string	false	是否显示搜索按钮，传字符串可自定义文本
onSearch	(value: string) => void	—	搜索触发时回调（回车或点击按钮）
onClear	() => void	—	清空时触发
onFocus	(e: FocusEvent) => void	—	获得焦点时触发
onBlur	(e: FocusEvent) => void	—	失去焦点时触发