---
layout: ~/layouts/MdxDocLayout.astro
title: "Sensitive Input"
description: "A masked input for sensitive values like API keys and passwords. Click to reveal."
sourceFile: "components/sensitive-input"
---

import ComponentExample from "~/components/docs/ComponentExample.astro";
import ComponentSection from "~/components/docs/ComponentSection.astro";
import PropsTable from "~/components/docs/PropsTable.astro";
import {
  SensitiveInputDemo,
  SensitiveInputSizesDemo,
  SensitiveInputControlledDemo,
  SensitiveInputStatesDemo,
} from "~/components/demos/SensitiveInputDemo";

{/* Hero Demo */}

<ComponentSection>
  <ComponentExample demo="SensitiveInputDemo">
    <SensitiveInputDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Installation */}

<ComponentSection>

## Installation

### Barrel

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

### Granular

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

</ComponentSection>

{/* Usage */}

<ComponentSection>

## Usage

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

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

</ComponentSection>

{/* Sizes */}

<ComponentSection>

## Sizes

  <p>SensitiveInput supports multiple sizes to fit different contexts.</p>
  <ComponentExample demo="SensitiveInputSizesDemo">
    <SensitiveInputSizesDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Controlled */}

<ComponentSection>

## Controlled

  <p>Use controlled mode for full control over the input value.</p>
  <ComponentExample demo="SensitiveInputControlledDemo">
    <SensitiveInputControlledDemo client:load />
  </ComponentExample>
</ComponentSection>

{/* States */}

<ComponentSection>

## States

  <p>
    Various input states including error, disabled, read-only, and with
    description.
  </p>
  <ComponentExample demo="SensitiveInputStatesDemo">
    <SensitiveInputStatesDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* API Reference */}

<ComponentSection>

## API Reference

  <PropsTable component="SensitiveInput" />
</ComponentSection>
