输入框

基本表单组件，并在原生控件基础上进行了功能扩展，可以组合使用。

演示

import { Input } from "@resolid/react-ui";

export default function App() {
  return <Input placeholder="输入框" />;
}

用法

import { Input, InputAddon, InputGroup } from "@resolid/react-ui";

输入框组结构

<InputGroup>
  <InputAddon />
  <Input />
</InputGroup>

特点

由本机 <input> 元素构建。
视觉和 ARIA 标签支持。
可以是受控的，也可以是不受控的。

举例

默认值

使用 defaultValue 属性提供初始的、不受控制的值。

import { Input } from "@resolid/react-ui";

export default function App() {
  return <Input defaultValue="Resolid UI" placeholder="输入框" />;
}

可控值

使用 value 和 onChange 属性来控制输入的值。

你输入的是:

import { Input } from "@resolid/react-ui";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState("");

  return (
    <div className="flex flex-col gap-2">
      <p>你输入的是: {value}</p>
      <Input value={value} onChange={(value) => setValue(value)} placeholder="输入框" />
    </div>
  );
}

前后置元素

使用 prefix 和 suffix 来设置输入框的前后置元素。

RMB

import { Input, Button } from "@resolid/react-ui";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  return (
    <div className="flex flex-col gap-3">
      <Input placeholder="邮箱地址" prefix={<SpriteIcon size="1.125em" name="email" />} />
      <Input placeholder="金额" suffix="RMB" suffixWidth={50} />
      <Input
        placeholder="搜索..."
        suffix={
          <Button
            className="pointer-events-auto"
            variant="ghost"
            color="neutral"
            size="xs"
            iconOnly
          >
            <SpriteIcon size="1.125em" name="search" />
          </Button>
        }
      />
      <Input
        placeholder="邮件地址"
        suffix={
          <Button className="pointer-events-auto" size="xs">
            订阅
          </Button>
        }
        suffixWidth={56}
      />
    </div>
  );
}

输入框组

使用 InputGroup 和 InputAddon 组件在输入中添加一个附加组件。

@example.com

姓名

RMB

.00

import { Input, InputGroup, InputAddon } from "@resolid/react-ui";

export default function App() {
  return (
    <div className="flex flex-col gap-3">
      <InputGroup>
        <InputAddon>@</InputAddon>
        <Input placeholder="用户名" />
      </InputGroup>
      <InputGroup>
        <Input placeholder="收件人的用户名" />
        <InputAddon className="bg-bg-normal">@example.com</InputAddon>
      </InputGroup>
      <InputGroup>
        <InputAddon>姓名</InputAddon>
        <Input placeholder="姓" />
        <Input placeholder="名" />
      </InputGroup>
      <InputGroup size="sm">
        <InputAddon>¥</InputAddon>
        <Input suffix="RMB" suffixWidth={50} placeholder="金额" />
        <InputAddon>.00</InputAddon>
      </InputGroup>
      <InputGroup>
        <Input placeholder="用户名" />
        <InputAddon>@</InputAddon>
        <Input placeholder="服务器" />
      </InputGroup>
    </div>
  );
}

属性

Input

属性	类型	默认值	必须
属性 name	字段的名称, 提交表单时使用	类型string	默认值	必须false
属性 value	受控值	类型string \| number	默认值	必须false
属性 defaultValue	默认值	类型string \| number	默认值	必须false
属性 onChange	onChange 回调	类型(value: string \| number) => void	默认值	必须false
属性 size	大小	类型"xs" \| "sm" \| "md" \| "lg" \| "xl"	默认值"md"	必须false
属性 disabled	是否禁用	类型boolean	默认值false	必须false
属性 required	是否必需	类型boolean	默认值false	必须false
属性 readOnly	是否只读	类型boolean	默认值false	必须false
属性 invalid	是否无效	类型boolean	默认值false	必须false
属性 placeholder	占位符文本	类型string	默认值	必须false
属性 prefix	前置元素	类型ReactNode	默认值	必须false
属性 prefixWidth	前置元素宽度	类型number	默认值	必须false
属性 suffix	后置元素	类型ReactNode	默认值	必须false
属性 suffixWidth	后置元素宽度	类型number	默认值	必须false
属性 type	输入框类型	类型"number" \| "text" \| "email" \| "password" \| "search" \| "tel" \| "url"	默认值"text"	必须false

InputGroup

属性	类型	默认值	必须
属性 size	大小	类型"xs" \| "sm" \| "md" \| "lg" \| "xl"	默认值"md"	必须false

建议更改此页面