Input 输入框

单行文本输入框。

import { Mail } from 'lucide-react'
import { Input } from '@hina-ui/react'

export default function Demo() {
  return (
    <Input
      defaultValue="shion@hoshimi.moe"
      type="email"
      clearable
      aria-label="邮箱"
      className="w-72"
      leading={<Mail />}
    />
  )
}

tsx

用法

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

输入框渲染为原生 input，value / onValueChange 绑定文本。未声明的属性都会传给 input，type、placeholder、maxLength、autoComplete 等属性照常可用。

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

export default function Demo() {
  return <Input defaultValue="" aria-label="昵称" placeholder="昵称" className="w-72" />
}

tsx

示例

附属内容

leading 与 trailing 属性位于输入区两侧，用于放置图标、单位或者快捷键提示。每一侧占一个与输入框等高的方格，内容居中。

/

import { Mail } from 'lucide-react'
import { Input, Kbd, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-72">
      <Input type="email" aria-label="邮箱" placeholder="邮箱" leading={<Mail />} />
      <Input inputMode="decimal" aria-label="体重" placeholder="体重" trailing="kg" />
      <Input aria-label="快速跳转" placeholder="快速跳转" trailing={<Kbd>/</Kbd>} />
    </Stack>
  )
}

tsx

清除

clearable 在有内容时显示清除按钮，点击后清空并调用 onClear。

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

export default function Demo() {
  return (
    <Input
      defaultValue="狼と香辛料"
      clearable
      aria-label="关键词"
      placeholder="关键词"
      className="w-72"
    />
  )
}

tsx

加载中

loading 显示加载指示器。有 leading 属性时顶替其中的图标，否则显示在末尾。

import { Mail } from 'lucide-react'
import { Input, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-72">
      <Input loading defaultValue="shion@hoshimi.moe" aria-label="校验邮箱中" leading={<Mail />} />
      <Input loading defaultValue="hoshimi" aria-label="校验昵称中" />
    </Stack>
  )
}

tsx

尺寸

sm 用于表格与工具栏，md 用于常规表单，lg 用于登录页等需要突出的场景。

import { Input, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-72">
      <Input size="sm" aria-label="小号" placeholder="小号" />
      <Input size="md" aria-label="中号" placeholder="中号" />
      <Input size="lg" aria-label="大号" placeholder="大号" />
    </Stack>
  )
}

tsx

形态

primary 带边框、背景与阴影；secondary 使用浅色背景；bare 背景透明，不绘制边框、阴影、悬停底色或容器聚焦环，尺寸与内边距仍由原有设置控制。

bare 保留禁用状态与 aria-invalid；错误信息可由 FormField 显示。附属按钮保留自身的悬停与键盘聚焦反馈。

import { Input, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-xs">
      <Input variant="primary" aria-label="primary" placeholder="primary" />
      <Input variant="secondary" aria-label="secondary" placeholder="secondary" />
      <Input variant="bare" aria-label="bare" placeholder="bare" />
    </Stack>
  )
}

tsx

状态

invalid 标出校验未通过，disabled 不可编辑。

import { Input, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-72">
      <Input invalid defaultValue="shion@" aria-label="校验未通过" />
      <Input disabled defaultValue="hoshimi" aria-label="已禁用" />
    </Stack>
  )
}

tsx

在表单中

放进 FormField 后，标签通过 htmlFor 指向输入框，说明与错误信息由字段渲染并关联到它；校验规则、校验时机与提交交给 Form。

'use client'

import { useState } from 'react'
import * as v from 'valibot'
import { Button, Form, FormField, Input, Text } from '@hina-ui/react'

const schema = v.object({
  name: v.pipe(
    v.string('请输入昵称'),
    v.nonEmpty('请输入昵称'),
    v.minLength(2, '昵称至少 2 个字'),
    v.maxLength(12, '昵称不超过 12 个字'),
  ),
})

export default function Demo() {
  const [values, setValues] = useState({ name: '' })
  const [saved, setSaved] = useState('')

  async function save(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    setSaved(JSON.stringify(data))
  }

  return (
    <Form values={values} rules={schema} className="w-80" onSubmit={save}>
      {({ submitting }) => (
        <>
          <FormField name="name" label="昵称" description="2 到 12 个字" required>
            <Input value={values.name} onValueChange={name => setValues({ ...values, name })} />
          </FormField>
          <Button type="submit" loading={submitting} className="self-start">
            保存
          </Button>
          {saved && (
            <Text tone="muted" size="sm">
              已保存：{saved}
            </Text>
          )}
        </>
      )}
    </Form>
  )
}

tsx

行为

primary 与 secondary 悬停时填充加深，聚焦时显示强调色环，校验未通过时边框与环变为危险色；bare 不绘制这些外观。
清除按钮只在有内容且未禁用时出现，点击后不会让输入区失焦。
点击附属内容会聚焦输入区，起始处的把光标放到开头，末尾的放到末尾。
附属内容、清除按钮与加载指示器的出现与消失都有过渡。

API

Props

属性	类型	默认值	说明
`value`	`string`	—	文本
`clearable`	`boolean`	`false`	是否显示清除按钮
`loading`	`boolean`	`false`	是否显示加载指示器
`variant`	`'primary' \| 'secondary' \| 'bare'`	`'primary'`	形态
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`invalid`	`boolean`	`false`	是否校验未通过
`disabled`	`boolean`	`false`	是否禁用
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`leading`	输入区起始处的附属内容
`trailing`	输入区末尾的附属内容

回调

回调	参数	说明
`onValueChange`	`value: string`	文本变化
`onClear`	—	文本被清空

用法

示例

附属内容

清除

加载中

尺寸

形态

状态

在表单中

行为

无障碍

API

Props

内容属性

回调