文档目录

输入框

原版 text_field / text_field_highlighted 1px 边框文本输入。

import { useState } from "react";

import { Input } from "./index";

/**
 * Input 预览用例：聊天框 + 受控值
*/
export function InputDemo() {
  const [value, setValue] = useState("");

  return (
    <div className="flex w-160 flex-col gap-8">
      <Input placeholder="按 T 聊天…" />
      <Input
        onChange={(event) => {
          setValue(event.target.value);
        }}
        placeholder="铁砧改名"
        value={value}
      />
      <Input disabled placeholder="禁用态" />
    </div>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/input

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

import { Input } from "@tennantite/ui";

CLI 拷贝导入

import { Input } from "@/components/tennantite/input";

import { useState } from "react";

import { Input } from "./index";

/**
 * Input 预览用例：聊天框 + 受控值
*/
export function InputDemo() {
  const [value, setValue] = useState("");

  return (
    <div className="flex w-160 flex-col gap-8">
      <Input placeholder="按 T 聊天…" />
      <Input
        onChange={(event) => {
          setValue(event.target.value);
        }}
        placeholder="铁砧改名"
        value={value}
      />
      <Input disabled placeholder="禁用态" />
    </div>
  );
}

API Reference

无公开 props。

源码

packages/ui/src/primitives/input/index.tsx

npm 包保留源码目录，可直接复制改造。