Input

input

收单行文本输入，可加前后缀和错误态

用法

基础用法

最简输入框，传 placeholder 占位。

tsx

<Input placeholder="请输入…" className="w-64" />

前后缀

prefix / suffix 槽嵌入单位、货币符号等。

¥.00

tsx

<Input prefix="¥" suffix=".00" placeholder="0" className="w-64" />

尺寸

size 提供 sm / md（默认）/ lg 三档。

tsx

<>
  <Input size="sm" placeholder="sm" className="w-64" />
  <Input size="md" placeholder="md" className="w-64" />
  <Input size="lg" placeholder="lg" className="w-64" />
</>

单元格内联编辑

variant="cell" 卸掉外壳（无边框 / 透明底 / 零内距 / 不占固定行高），焦点态换成浅底 + 内嵌下划线——焦点环会溢出去顶到相邻格。调用处不需要任何 className。


customer_name
contact_phone
service_city

tsx

const columns: ColumnDef<SeedRow, any>[] = [
  { accessorKey: "field", header: "字段名", size: 160 },
  {
    accessorKey: "value",
    header: "取值",
    cell: ({ row }) => (
      <Input variant="cell" defaultValue={row.original.value} aria-label={row.original.field} placeholder="留空" />
    ),
  },
];

<Table columns={columns} data={rows} density="compact" />

无效态

invalid 标红边框与焦点环（独立使用时手动传）。

tsx

<Input invalid defaultValue="错的值" className="w-64" />

禁用态

disabled 降透明度并屏蔽交互。

tsx

<Input disabled defaultValue="禁用态" className="w-64" />

何时用

单行文本输入。多行文本用 Textarea；从固定选项里选一项用 Select；布尔/多选/单选分别用 Switch / Checkbox / Radio。放进 hulian Field 内会自动接管 label/error/aria 关联。

导入

import { Input, inputShellVariants } from "@hulianui/ui"

Props

继承原生 <input> 属性（除 size/prefix 被下方覆盖外，如 value/onChange/type/placeholder/disabled…）。

名称	类型	默认	说明
size	`"xs" ｜ "sm" ｜ "md" ｜ "lg"`	`"md"`	尺寸（CVA 变体，覆盖原生 size）。`xs` = 28px 高 / 12px 字，给存量密集数据表的行内编辑器（仍带边框，区别于无边框的 `variant="cell"`）。`variant="cell"` 下只影响字号，不再有高度与内距
variant	`"default" ｜ "cell"`	`"default"`	外壳形态。`cell` = 表格单元格里的就地编辑器：无边框、透明底、零内距、不占固定行高，焦点态用浅底 + 内嵌下划线代替焦点环
value	`string ｜ number ｜ readonly string[] ｜ null`	-	受控值。除原生类型外还收 `null`，按空串渲染（#220）：`useForm` 的 `register().value` 会把「显式清空」的 `null` 原样给出来，而原生 `<input value={null}>` 会被 React 判成非受控并打告警，故在本组件收口。不传（`undefined`）仍是非受控
invalid	`boolean`	`false`	独立使用时标红；在 hulian Field 内由 Field.Root invalid 自动驱动，无需重复传
disabled	`boolean`	`false`	禁用
ref	`Ref<HTMLInputElement>`	-	转发到内层原生 `<input>`（不是外壳 span）。`focus()` / `select()` / 取 `.value` / react-hook-form 的 `register()` 都靠它

Events

事件	类型	说明
onChange	`(e: ChangeEvent<HTMLInputElement>) => void`	透传原生输入回调（受控时配合 `value` 使用）

Slots

插槽	类型	说明
prefix	`ReactNode`	前缀内容（如 `¥`）
suffix	`ReactNode`	后缀内容（如 `.00`）

禁忌 / 坑

在 hulian Field 内时不要重复传 invalid——Field.Root 的 invalid 会自动驱动标红，手动再传会冲突。invalid 只在脱离 Field 独立使用时手动传。
表格里就地编辑用 variant="cell"，不要在调用处写 className="border-0 bg-transparent p-0 focus-visible:ring-0 …" 覆盖默认外壳。除了这是明令禁止的调用处补丁，还有两处肉眼难发现：一是 ring-0 清不掉 ring-offset（残留一圈底色描边），二是默认外壳的固定行高（h-10）不是 padding，p-0 覆盖不掉，密集表格的行高仍会被撑起来。
variant="cell" 的焦点态是浅底 + 内嵌下划线，不是焦点环——单元格没有内距，2px 环 + 2px offset 会溢出去顶到相邻格。若你所在的场景需要更强的焦点提示，改整格背景（在 <td> 上做），不要把环加回来。

Playground

size占位符invaliddisabled

<Input size="md" placeholder="请输入…" />

用法

基础用法

最简输入框，传 placeholder 占位。

tsx

<Input placeholder="请输入…" className="w-64" />

前后缀

prefix / suffix 槽嵌入单位、货币符号等。

¥.00

tsx

<Input prefix="¥" suffix=".00" placeholder="0" className="w-64" />

尺寸

size 提供 sm / md（默认）/ lg 三档。

tsx

<>
  <Input size="sm" placeholder="sm" className="w-64" />
  <Input size="md" placeholder="md" className="w-64" />
  <Input size="lg" placeholder="lg" className="w-64" />
</>

单元格内联编辑


customer_name
contact_phone
service_city

tsx

const columns: ColumnDef<SeedRow, any>[] = [
  { accessorKey: "field", header: "字段名", size: 160 },
  {
    accessorKey: "value",
    header: "取值",
    cell: ({ row }) => (
      <Input variant="cell" defaultValue={row.original.value} aria-label={row.original.field} placeholder="留空" />
    ),
  },
];

<Table columns={columns} data={rows} density="compact" />

无效态

invalid 标红边框与焦点环（独立使用时手动传）。

tsx

<Input invalid defaultValue="错的值" className="w-64" />

禁用态

disabled 降透明度并屏蔽交互。

tsx

<Input disabled defaultValue="禁用态" className="w-64" />

Props

继承原生 <input> 属性（除 size/prefix 被下方覆盖外，如 value/onChange/type/placeholder/disabled…）。

名称	类型	默认	说明
size	`"xs" ｜ "sm" ｜ "md" ｜ "lg"`	`"md"`	尺寸（CVA 变体，覆盖原生 size）。`xs` = 28px 高 / 12px 字，给存量密集数据表的行内编辑器（仍带边框，区别于无边框的 `variant="cell"`）。`variant="cell"` 下只影响字号，不再有高度与内距
variant	`"default" ｜ "cell"`	`"default"`	外壳形态。`cell` = 表格单元格里的就地编辑器：无边框、透明底、零内距、不占固定行高，焦点态用浅底 + 内嵌下划线代替焦点环
value	`string ｜ number ｜ readonly string[] ｜ null`	-	受控值。除原生类型外还收 `null`，按空串渲染（#220）：`useForm` 的 `register().value` 会把「显式清空」的 `null` 原样给出来，而原生 `<input value={null}>` 会被 React 判成非受控并打告警，故在本组件收口。不传（`undefined`）仍是非受控
invalid	`boolean`	`false`	独立使用时标红；在 hulian Field 内由 Field.Root invalid 自动驱动，无需重复传
disabled	`boolean`	`false`	禁用
ref	`Ref<HTMLInputElement>`	-	转发到内层原生 `<input>`（不是外壳 span）。`focus()` / `select()` / 取 `.value` / react-hook-form 的 `register()` 都靠它

事件

类型

说明

onChange

(e: ChangeEvent<HTMLInputElement>) => void

透传原生输入回调（受控时配合 value 使用）

插槽

类型

说明

prefix

ReactNode

前缀内容（如 ¥）

suffix

ReactNode

后缀内容（如 .00）

禁忌 / 坑

在 hulian Field 内时不要重复传 invalid——Field.Root 的 invalid 会自动驱动标红，手动再传会冲突。invalid 只在脱离 Field 独立使用时手动传。

表格里就地编辑用 variant="cell"，不要在调用处写 className="border-0 bg-transparent p-0 focus-visible:ring-0 …" 覆盖默认外壳。除了这是明令禁止的调用处补丁，还有两处肉眼难发现：一是 ring-0 清不掉 ring-offset（残留一圈底色描边），二是默认外壳的固定行高（h-10）不是 padding，p-0 覆盖不掉，密集表格的行高仍会被撑起来。

variant="cell" 的焦点态是浅底 + 内嵌下划线，不是焦点环——单元格没有内距，2px 环 + 2px offset 会溢出去顶到相邻格。若你所在的场景需要更强的焦点提示，改整格背景（在 <td> 上做），不要把环加回来。

Input

用法

基础用法

前后缀

尺寸

单元格内联编辑

无效态

禁用态

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关

Playground

Input

用法

基础用法

前后缀

尺寸

单元格内联编辑

无效态

禁用态

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关

Playground