Kappa / Sensitive Input

Access token

Stored encrypted and shown only when you choose to reveal it.

<script setup>
import { ref } from "vue";
import { SensitiveInput } from "@dicehub/kappa/components/sensitive-input";

const token = ref("");
</script>

<template>
  <SensitiveInput
    id="access-token"
    v-model="token"
    label="Access token"
    autocomplete="off"
    placeholder="dh_live_…"
    description="Stored encrypted and shown only when you choose to reveal it."
  />
</template>

Installation

Sensitive Input is part of the main Kappa package. It renders a native input and uses the Clipboard API when available, with a browser fallback for older contexts.

Barrel

import { SensitiveInput } from "@dicehub/kappa";

Granular

import { SensitiveInput } from "@dicehub/kappa/components/sensitive-input";

Give the control a visible label or an explicit accessible name. Values start masked when present. Hover or focus the control to see Click to reveal and the copy action; the eye action stays available. Leaving the control masks it again. Copy always writes the original value.

<script setup>
import { SensitiveInput } from "@dicehub/kappa/components/sensitive-input";
</script>

<template>
  <SensitiveInput
    aria-label="Webhook signing secret"
    default-value="whsec_7f29b1d0"
    name="webhook-secret"
    autocomplete="off"
  />
</template>

Composition

Typical part hierarchy

SensitiveInput <div>
├── label (optional)
├── control
│   ├── input [password | text]
│   ├── copy action
│   └── reveal / hide action
├── description / error (optional)
└── live status

Sensitive Input owns the visibility and clipboard interaction around one native input. Use its optional label, description, and error props for a self-contained field. For larger forms, compose the control with Kappa Field or use native aria-describedby content around it.

The input stays keyboard reachable while masked. Enter or Space reveals it; Escape masks it.
Copy uses the unmasked value and emits copy only after a successful write.
Use v-model for controlled state or defaultValue for an uncontrolled initial value.
Native input attributes and listeners pass to the input. Classes and styles apply to the Kappa root.

Examples

Sizes

Use xs, sm, base, or lg to match nearby Kappa controls.

<script setup>
import { SensitiveInput } from "@dicehub/kappa/components/sensitive-input";
</script>

<template>
  <SensitiveInput size="xs" aria-label="Extra-small secret" default-value="xs-secret" />
  <SensitiveInput size="sm" aria-label="Small secret" default-value="sm-secret" />
  <SensitiveInput size="base" aria-label="Base secret" default-value="base-secret" />
  <SensitiveInput size="lg" aria-label="Large secret" default-value="lg-secret" />
</template>

Controlled Value

Use v-model when the application owns the sensitive value.

Controlled secret

Current value: dh_secret_4b8f2c

<script setup>
import { ref } from "vue";
import { SensitiveInput } from "@dicehub/kappa/components/sensitive-input";

const secret = ref("dh_secret_4b8f2c");
</script>

<template>
  <SensitiveInput v-model="secret" label="Controlled secret" />
  <output>Current value: {{ secret }}</output>
</template>

Form States

Pair invalid, disabled, and read-only states with clear form messaging.

Invalid token

This token is not valid for the selected workspace.

Disabled token

Read-only token

<script setup>
import { SensitiveInput } from "@dicehub/kappa/components/sensitive-input";
</script>

<template>
  <SensitiveInput
    label="Invalid token"
    default-value="bad_token"
    error="This token is not valid for the selected workspace."
    invalid
  />
  <SensitiveInput label="Disabled token" default-value="archived_secret" disabled />
  <SensitiveInput label="Read-only token" default-value="view_only_secret" read-only />
</template>

Reveal and Copy

Masked values reveal from the control or keyboard, and copy feedback is announced.

Tab to the control, press Enter while masked, then use Escape to mask it again.

<script setup>
import { ref } from "vue";
import { SensitiveInput } from "@dicehub/kappa/components/sensitive-input";

const copied = ref(false);
</script>

<template>
  <SensitiveInput
    aria-label="Signing secret"
    default-value="signing_secret_89ac"
    @copy="copied = true"
  />
  <p v-if="copied" role="status">Secret copied to the clipboard.</p>
</template>

Accessibility

Use a visible label whenever the layout permits it, or provide aria-label or aria-labelledby.
Masked inputs remain keyboard reachable and expose a short instruction through aria-describedby.
Reveal and copy buttons have changing accessible names. Copy success is announced in a polite live region.
disabled blocks editing, reveal, and copy. readOnly blocks edits but keeps reveal and copy available.
Connect helper and error text with the built-in props or your own aria-describedby target.
Focus remains visible in both themes, reduced-motion mode, and forced-color mode.

API Reference

SensitiveInput

Renders a Kappa root, control, native input, and optional action buttons.

Prop	Type	Default	Description
`modelValue / v-model`	`string \| number`	`—`	Controlled value. Updates emit the current value as a string.
`defaultValue`	`string \| number`	`""`	Initial value for uncontrolled use. Native value is also forwarded.
`label`	`string`	`—`	Optional visible label connected to the input.
`description`	`string`	`—`	Optional help text connected with aria-describedby.
`error`	`string`	`—`	Optional validation message. It also marks the field invalid.
`invalid`	`boolean`	`false`	Marks the control invalid and sets aria-invalid=true.
`disabled`	`boolean`	`false`	Disables the native input and reveal/copy actions.
`readOnly`	`boolean`	`false`	Prevents edits while still allowing reveal and copy.
`size`	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Sets visual control density.

Parts

Part	Element	Description
`SensitiveInput`	`div`	Root wrapper with size and state data attributes.
`SensitiveInput label`	`label`	Optional native label for the input.
`SensitiveInput control`	`div`	Control surface containing the input and actions.
`SensitiveInput input`	`input`	Native input receiving forwarded attributes and listeners.
`SensitiveInput copy`	`button`	Copies the unmasked value and announces success.
`SensitiveInput toggle`	`button`	Reveals or masks the value.

Events

Event	Payload	Description
`update:modelValue`	`string`	Emitted for Vue v-model on every input event.
`valueChange`	`string`	Emitted with the current value after an input event.
`copy`	`—`	Emitted after a successful clipboard copy.
`visibilityChange`	`boolean`	Emitted when the value changes between masked and revealed.
`input / change / blur`	`Event`	Native listeners pass through to the input element.

Data Attributes

Attribute	Value	Description
`data-slot`	`"sensitive-input" / "sensitive-input-control" / …`	Stable selectors for the root and named parts.
`data-size`	`"xs" \| "sm" \| "base" \| "lg"`	Resolved visual density on the root.
`data-state`	`"empty" \| "masked" \| "revealed"`	Current visibility state on the control.
`data-invalid`	`""`	Present on the root and control when invalid.
`data-disabled / data-readonly`	`""`	Present when the matching state is active.

Exports

Export	Description
`SensitiveInput`	Masked, revealable, copyable native input.
`SensitiveInputProps / SensitiveInputEmits`	Public props and Vue event contracts.
`SensitiveInputMode / SensitiveInputModelValue`	Visibility state and controlled-value types.
`SENSITIVE_INPUT_SIZES`	Supported density values.
`SENSITIVE_INPUT_DEFAULT_SIZE`	Default base density.
`isSensitiveInputSize / resolveSensitiveInputSize`	Safe density guard and resolver.