跳转到内容
AsterUI v0.12.76

Input

用于用户数据输入的文本输入字段，带验证状态和自定义选项。

导入

Section titled “导入”
import { Input } from 'asterui'

示例

Section titled “示例”

基础输入

简单的文本输入字段。

 
import { Input } from 'asterui'

function App() {
  return (
      <Input placeholder="Enter text..." />
    )
}

export default App

尺寸

五种尺寸：xs、sm、md（默认）、lg 和 xl。

 
import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input size="xs" placeholder="Extra small" />
        <Input size="sm" placeholder="Small" />
        <Input size="md" placeholder="Medium (default)" />
        <Input size="lg" placeholder="Large" />
        <Input size="xl" placeholder="Extra large" />
      </Space>
    )
}

export default App

颜色

用于视觉强调的不同颜色变体。

 
import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input color="primary" placeholder="Primary" />
        <Input color="secondary" placeholder="Secondary" />
        <Input color="accent" placeholder="Accent" />
        <Input color="info" placeholder="Info" />
        <Input color="success" placeholder="Success" />
        <Input color="warning" placeholder="Warning" />
        <Input color="error" placeholder="Error" />
      </Space>
    )
}

export default App

输入类型

不同的 HTML 输入类型。

 
import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input type="text" placeholder="Text input" />
        <Input type="email" placeholder="Email input" />
        <Input type="password" placeholder="Password input" />
        <Input type="number" placeholder="Number input" />
        <Input type="tel" placeholder="Telephone input" />
        <Input type="url" placeholder="URL input" />
        <Input type="search" placeholder="Search input" />
      </Space>
    )
}

export default App

变体

带边框和幽灵样式。

 
import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input placeholder="Default bordered" />
        <Input bordered={false} placeholder="Without border" />
        <Input ghost placeholder="Ghost variant" />
      </Space>
    )
}

export default App

输入掩码

带掩码模式的格式化输入。

 
import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input mask="(###) ###-####" placeholder="Phone number" />
        <Input mask="####-####-####-####" placeholder="Credit card" />
        <Input mask="##/##/####" placeholder="Date (MM/DD/YYYY)" />
        <Input mask="**-####" placeholder="License plate (AB-1234)" />
      </Space>
    )
}

export default App

受控输入

带受控状态的输入。

Value: (empty)
 
import { Input, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('')
  
  return (
      <Space direction="vertical" size="sm">
        <Input
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="Type something..."
        />
        <div className="text-sm text-base-content/70">
          Value: {value || '(empty)'}
        </div>
      </Space>
    )
}

export default App

禁用

禁用的输入状态。

 
import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input placeholder="Normal input" />
        <Input placeholder="Disabled input" disabled />
        <Input value="Disabled with value" disabled />
      </Space>
    )
}

export default App

允许清除

带清除按钮的输入。

 
import { Input } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('Clear me!')
  
  return (
      <Input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        allowClear
        placeholder="Type then clear..."
      />
    )
}

export default App

前缀和后缀

带前缀和后缀图标的输入。

🔍
👤
@gmail.com
 
import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input prefix={<span>🔍</span>} placeholder="Search..." />
        <Input prefix={<span>👤</span>} placeholder="Username" />
        <Input suffix="@gmail.com" placeholder="Email" />
      </Space>
    )
}

export default App

验证状态

带表单反馈验证状态的输入。

This field is required

Please verify this value

 
import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <div>
          <Input status="error" placeholder="Error status" errorId="error-msg" />
          <p id="error-msg" className="text-error text-sm mt-1">This field is required</p>
        </div>
        <div>
          <Input status="warning" placeholder="Warning status" />
          <p className="text-warning text-sm mt-1">Please verify this value</p>
        </div>
      </Space>
    )
}

export default App

浮动标签

带动画浮动标签的输入，聚焦或填充时移到上方。

 
import { Input, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  
  return (
      <Space direction="vertical" size="md">
        <Input
          floatingLabel="Email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <Input
          floatingLabel="Password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </Space>
    )
}

export default App

插件

带输入字段前/后文本或元素（外部）的输入。

 
import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <Input addonBefore="https://" placeholder="your-site.com" />
        <Input addonAfter=".com" placeholder="username" />
        <Input addonBefore="$" addonAfter=".00" placeholder="0" />
      </Space>
    )
}

export default App

API

Section titled “API”

Input

Section titled “Input”
属性描述类型默认值
typeHTML 输入类型'text' | 'password' | 'email' | 'number' | 'date' | 'datetime-local' | 'week' | 'month' | 'tel' | 'url' | 'search' | 'time''text'
size输入尺寸'xs' | 'sm' | 'md' | 'lg' | 'xl'-
color输入颜色变体'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'-
status验证状态（设置 aria-invalid）'error' | 'warning'-
ghost幽灵变体（透明）booleanfalse
bordered显示边框（设置为 false 移除）booleantrue
allowClear输入有值时显示清除按钮boolean | { clearIcon?: ReactNode }false
onClear点击清除按钮时的回调() => void-
prefix前缀图标或元素（输入内部）React.ReactNode-
suffix后缀图标或元素（输入内部）React.ReactNode-
addonBefore输入前的文本/元素（外部，使用 DaisyUI label）React.ReactNode-
addonAfter输入后的文本/元素（外部，使用 DaisyUI label）React.ReactNode-
floatingLabel浮动标签文本（使用 DaisyUI floating-label）string-
mask输入掩码模式。使用 # 表示数字，A 表示字母，* 表示字母数字string-
maskPlaceholder掩码中显示的占位符字符string'_'
errorId错误消息元素的 ID（用于 aria-describedby）string-
disabled禁用状态booleanfalse
placeholder占位符文本string-
value输入值string-
onChange变化事件处理器(e: React.ChangeEvent<HTMLInputElement>) => void-
className额外的 CSS 类名string-
data-testid用于测试的测试 IDstring-

无障碍

Section titled “无障碍”
  • 使用原生 <input> 元素以获得正确的键盘支持
  • 禁用状态正确传达给辅助技术
  • 清除按钮有 aria-label 供屏幕阅读器使用
  • 使用 status="error" 自动设置 aria-invalid
  • 使用 errorId 通过 aria-describedby 将输入链接到错误消息
  • 键盘导航的焦点状态清晰可见