---
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 Heading from "~/components/docs/Heading.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>
  <Heading level={2}>Installation</Heading>
  <Heading level={3}>Barrel</Heading>

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

<Heading level={3}>Granular</Heading>

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

</ComponentSection>

{/* Usage */}

<ComponentSection>
  <Heading level={2}>Usage</Heading>

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

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

</ComponentSection>

{/* Sizes */}

<ComponentSection>
  <Heading level={2}>Sizes</Heading>
  <p>SensitiveInput supports multiple sizes to fit different contexts.</p>
  <ComponentExample demo="SensitiveInputSizesDemo">
    <SensitiveInputSizesDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Controlled */}

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

{/* States */}

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

{/* API Reference */}

<ComponentSection>
  <Heading level={2}>API Reference</Heading>
  <PropsTable component="SensitiveInput" />
</ComponentSection>
