Sensitive Input 敏感信息输入框

API 密钥

import { SensitiveInput } from "@lark-ui/core";

export function SensitiveInputDemo() {
  return (
    <div className="w-80">
      <SensitiveInput label="API 密钥" defaultValue="sk_live_abc123xyz789" />
    </div>
  );
}

安装

统一导出

import { SensitiveInput } from "@lark-ui/core";

按需导出

import { SensitiveInput } from "@lark-ui/core/components/sensitive-input";

用法

import { SensitiveInput } from "@lark-ui/core";

export default function Example() {
  return <SensitiveInput label="Secret" defaultValue="my-secret-key" />;
}

尺寸

敏感信息输入框（SensitiveInput）支持多种尺寸，以适应不同的使用场景。

xs

xs 尺寸

sm

sm 尺寸

base

base 尺寸

lg

lg 尺寸

import { SensitiveInput } from "@lark-ui/core";

export function SensitiveInputSizesDemo() {
  const sizes = ["xs", "sm", "base", "lg"] as const;
  return (
    <div className="flex flex-col gap-4">
      {sizes.map((size) => (
        <div key={size} className="flex items-center gap-2">
          <span className="w-12 text-sm text-lark-subtle">{size}</span>
          <SensitiveInput
            label={`${size} 尺寸`}
            size={size}
            defaultValue="secret-api-key-123"
          />
        </div>
      ))}
    </div>
  );
}

受控

使用受控模式可以完全控制输入框的值。

受控密钥

当前值：my-secret-value

import { useState } from "react";
import { SensitiveInput, Button } from "@lark-ui/core";

export function SensitiveInputControlledDemo() {
  const [value, setValue] = useState("my-secret-value");

  return (
    <div className="flex w-80 flex-col gap-4">
      <SensitiveInput label="受控密钥" value={value} onValueChange={setValue} />
      <div className="text-sm text-lark-subtle">
        当前值：<code className="text-lark-default">{value}</code>
      </div>
      <div className="flex gap-2">
        <Button
          onClick={() => setValue("new-secret-" + Date.now())}
          variant="primary"
          size="sm"
        >
          修改值
        </Button>
        <Button onClick={() => setValue("")} variant="secondary" size="sm">
          清空
        </Button>
      </div>
    </div>
  );
}

状态

多种输入状态，包括错误、禁用、只读以及带描述。

错误状态

此 API 密钥无效

禁用

只读

带说明

请妥善保管此值，不要分享

import { SensitiveInput } from "@lark-ui/core";

export function SensitiveInputStatesDemo() {
  return (
    <div className="flex w-80 flex-col gap-4">
      <SensitiveInput
        label="错误状态"
        variant="error"
        defaultValue="invalid-key"
        error="此 API 密钥无效"
      />
      <SensitiveInput label="禁用" defaultValue="cannot-edit" disabled />
      <SensitiveInput
        label="只读"
        defaultValue="view-only-secret-key"
        readOnly
      />
      <SensitiveInput
        label="带说明"
        defaultValue="my-secret-value"
        description="请妥善保管此值，不要分享"
      />
    </div>
  );
}

API 参考

属性	类型	默认值	说明
alt	`string`	-	-
autoComplete	`React.HTMLInputAutoCompleteAttribute`	-	-
checked	`boolean`	-	-
disabled	`boolean`	-	-
height	`number \| string`	-	-
list	`string`	-	-
name	`string`	-	-
placeholder	`string`	-	-
readOnly	`boolean`	-	-
required	`boolean`	-	-
width	`number \| string`	-	-
className	`string`	-	-
id	`string`	-	-
lang	`string`	-	-
title	`string`	-	-
children	`ReactNode`	-	-
value	`string`	-	受控的值
size	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	输入框尺寸。 - `"xs"` — 适合紧凑界面的超小尺寸 - `"sm"` — 适合次要字段的小尺寸 - `"base"` — 默认输入框尺寸 - `"lg"` — 适合突出字段的大尺寸
variant	`"default" \| "error"`	`"default"`	输入框的样式变体。 - `"default"` — 默认输入框外观 - `"error"` — 校验失败时的错误状态
label	`ReactNode`	-	输入框的标签内容（启用 Field 包裹层并设置掩码状态的标签）——可以是字符串或任意 React 节点
labelTooltip	`ReactNode`	-	通过信息图标显示在标签旁的工具提示内容
description	`ReactNode`	-	显示在输入框下方的辅助说明文字
error	`string \| object`	-	错误信息或校验错误对象

Lark

Lark

Sensitive Input 敏感信息输入框

安装

统一导出

按需导出

用法

尺寸

受控

状态

API 参考