输入框

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

演示

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

属性	类型	默认值	必须
属性size	简介大小	类型"xs" \| "sm" \| "md" \| "lg" \| "xl"	默认值"md"	必须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
属性value	简介可控值	类型string \| number	默认值-	必须false
属性defaultValue	简介默认值	类型string \| number	默认值""	必须false
属性onChange	简介 onChange 回调	类型((value: string \| number) => void)	默认值-	必须false
属性name	简介字段的名称, 提交表单时使用	类型string	默认值-	必须false
属性disabled	简介是否禁用	类型boolean	默认值false	必须false
属性required	简介是否必需	类型boolean	默认值false	必须false
属性readOnly	简介是否只读	类型boolean	默认值false	必须false
属性invalid	简介是否无效	类型boolean	默认值false	必须false

InputGroup

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

建议更改此页面