Input 输入框

用于接收用户输入的文本信息。

基础用法

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

function Demo() {
  return <Input placeholder="请输入内容" />
}

受控与非受控

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

// 受控模式
function ControlledInput() {
  const [value, setValue] = useState('')
  return <Input value={value} onChange={(e) => setValue(e.target.value)} placeholder="受控输入" />
}

// 非受控模式
function UncontrolledInput() {
  return <Input defaultValue="默认内容" placeholder="非受控输入" />
}

标签与错误状态

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

function Demo() {
  return (
    <>
      <Input label="用户名" placeholder="请输入用户名" />
      <Input label="邮箱" error errorMessage="邮箱格式不正确" defaultValue="invalid-email" />
    </>
  )
}

尺寸

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

function Demo() {
  return (
    <>
      <Input size="sm" placeholder="小尺寸" />
      <Input size="md" placeholder="中尺寸" />
      <Input size="lg" placeholder="大尺寸" />
    </>
  )
}

禁用与只读

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

function Demo() {
  return (
    <>
      <Input disabled value="禁用状态" />
      <Input readonly value="只读状态" />
    </>
  )
}

API

Props

名称	类型	默认值	说明
value	string	—	受控模式当前值
defaultValue	string	—	非受控模式默认值
type	'text' | 'password' | 'email' | 'number' | 'search'	'text'	输入类型
placeholder	string	—	占位文本
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
error	boolean	false	是否处于错误状态
errorMessage	string	—	错误提示信息
label	string	—	标签文本
size	'sm' | 'md' | 'lg'	'md'	尺寸
onChange	(e: ChangeEvent) => void	—	值变化时触发
onBlur	(e: FocusEvent) => void	—	失去焦点时触发
onFocus	(e: FocusEvent) => void	—	获得焦点时触发