Phi / Sensitive Input

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

<template>
  <SensitiveInput
    label="API Key"
    default-value="example-api-key"
  />
</template>

Installation

Barrel

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

Granular

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

Usage

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

<template>
  <SensitiveInput label="Secret" default-value="my-secret-key" />
</template>

Examples

Sizes

SensitiveInput supports multiple sizes to fit different contexts.

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

const sizes = ["xs", "sm", "base", "lg"];
</script>

<template>
  <div class="stack">
    <SensitiveInput
      v-for="size in sizes"
      :key="size"
      :label="`${size} size`"
      :size="size"
      default-value="secret-api-key-123"
    />
  </div>
</template>

Controlled

Use controlled mode for full control over the input value.

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

const value = ref("my-secret-value");
</script>

<template>
  <div class="stack">
    <SensitiveInput label="Controlled Secret" v-model="value" />
    <div>Current value: <code>{{ value }}</code></div>
    <div class="actions">
      <Button size="sm" variant="primary" @click="value = 'new-secret'">
        Change value
      </Button>
      <Button size="sm" variant="secondary" @click="value = ''">
        Clear
      </Button>
    </div>
  </div>
</template>

States

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

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

<template>
  <div class="stack">
    <SensitiveInput
      label="Error State"
      variant="error"
      default-value="invalid-key"
      error="This API key is not valid"
    />
    <SensitiveInput label="Disabled" default-value="cannot-edit" disabled />
    <SensitiveInput label="Read-only" default-value="view-only-secret-key" read-only />
    <SensitiveInput
      label="With Description"
      default-value="my-secret-value"
      description="Keep this value secure and don't share it"
    />
  </div>
</template>

API Reference

SensitiveInput accepts native HTML input attributes plus the following:

Props

Prop	Type	Default	Description
`modelValue / v-model`	`string`	`-`	Controlled sensitive value.
`value`	`string`	`-`	Controlled value alias for `modelValue`.
`defaultValue`	`string`	`""`	Initial value for uncontrolled usage.
`size`	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Input size. Matches the Input component sizes.
`variant`	`"default" \| "error"`	`"default"`	Visual variant. Error styling is also applied automatically when `error` is present.
`label`	`string`	`-`	Visible label rendered above the input and used for the masked button label.
`labelTooltip`	`string`	`-`	Tooltip content displayed next to the visible label.
`description`	`string`	`-`	Helper text displayed below the input when no error is present.
`error`	`string \| { message: string; match?: SensitiveInputErrorMatch }`	`-`	Validation message. Marks the control invalid and replaces `description`.
`invalid`	`boolean`	`false`	Marks the input invalid without requiring an error message.
`disabled`	`boolean`	`false`	Disables reveal, copy, editing, and focus interactions.
`readOnly`	`boolean`	`false`	Allows reveal without editing the value.
`required`	`boolean`	`-`	Native required state. When explicitly `false`, the label shows optional text.
`placeholder`	`string`	`-`	Native placeholder text shown when the value is empty.
`autoComplete`	`string`	`"off"`	Native autocomplete attribute.
`name`	`string`	`-`	Native input name.
`id`	`string`	`generated`	Native input id and base id for associated field text.
`$attrs`	`InputHTMLAttributes`	`-`	Native input attributes and listeners except `type`, `value`, `defaultValue`, and native `size`.

Events

Event	Type	Description
`@update:model-value`	`(value: string) => void`	`v-model` update event.
`@value-change`	`(value: string) => void`	Emitted with the next value when the input changes.
`@copy`	`() => void`	Emitted after the value is copied to the clipboard.

Slots

Slot	Description
`label`	Overrides the label prop with custom label markup.
`description`	Overrides the description prop with custom helper markup.
`error`	Overrides the error message with custom error markup.

Accessibility

Masked Value

A populated masked input renders a focusable button-like container with an accessible masked label.

Reveal Flow

Click, Enter, or Space reveals the value. Escape masks it again and returns focus to the container.

Clipboard Feedback

A successful copy updates the action label to Copied and announces the result through a polite live region. Feedback lasts two seconds after the latest successful copy.