Sensitive Input

API Key

<SensitiveInput 
  label="API Key" 
  defaultValue="sk_live_abc123xyz789" 
/>

Installation

Barrel

import { SensitiveInput } from "@cloudflare/kumo";

Granular

import { SensitiveInput } from "@cloudflare/kumo/components/sensitive-input";

Usage

import { SensitiveInput } from "@cloudflare/kumo";

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

Sizes

SensitiveInput supports multiple sizes to fit different contexts.

xs

xs size

sm

sm size

base

base size

lg

lg size

<SensitiveInput label="xs size" size="xs" defaultValue="secret-key" />
<SensitiveInput label="sm size" size="sm" defaultValue="secret-key" />
<SensitiveInput label="base size" size="base" defaultValue="secret-key" />
<SensitiveInput label="lg size" size="lg" defaultValue="secret-key" />

Controlled

Use controlled mode for full control over the input value.

Controlled Secret

Current value: my-secret-value

const [value, setValue] = useState("my-secret-value");

<SensitiveInput
  label="Controlled Secret"
  value={value}
  onValueChange={setValue}
/>

States

Various input states including error, disabled, read-only, and with description.

Error State

This API key is not valid

Disabled

Read-only

With Description

Keep this value secure and don't share it

<SensitiveInput
  label="Error State"
  variant="error"
  defaultValue="invalid-key"
  error="This API key is not valid"
/>
<SensitiveInput
  label="Disabled"
  defaultValue="cannot-edit"
  disabled
/>
<SensitiveInput
  label="Read-only"
  defaultValue="view-only-secret-key"
  readOnly
/>
<SensitiveInput
  label="With Description"
  defaultValue="my-secret-value"
  description="Keep this value secure"
/>

API Reference

Prop	Type	Default	Description
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`	-	Controlled value
size	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Size of the input. - `"xs"` — Extra small for compact UIs - `"sm"` — Small for secondary fields - `"base"` — Default input size - `"lg"` — Large for prominent fields
variant	`"default" \| "error"`	`"default"`	Style variant of the input. - `"default"` — Default input appearance - `"error"` — Error state for validation failures
label	`ReactNode`	-	Label content for the input (enables Field wrapper and sets masked state label) - can be a string or any React node
labelTooltip	`ReactNode`	-	Tooltip content to display next to the label via an info icon
description	`ReactNode`	-	Helper text displayed below the input
error	`string \| object`	-	Error message or validation error object

Kumo