Sensitive Input - Kumo Svelte

API Key

<script lang="ts">
  import { SensitiveInput } from 'kumo-svelte';
</script>

<div class="w-80">
  <SensitiveInput label="API Key" defaultValue="sk_live_abc123xyz789" />
</div>

Installation

Barrel

import { SensitiveInput } from 'kumo-svelte';

Granular

import { SensitiveInput } from 'kumo-svelte/components/sensitive-input';

Usage

<script lang="ts">  import { SensitiveInput } from 'kumo-svelte';</script><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

<script lang="ts">
  import { SensitiveInput } from 'kumo-svelte';

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

<div class="flex flex-col gap-4">
  {#each sizes as size (size)}
    <div class="flex items-center gap-2">
      <span class="w-12 text-sm text-kumo-subtle">{size}</span>
      <SensitiveInput
        label={`${size} size`}
        {size}
        defaultValue="secret-api-key-123"
      />
    </div>
  {/each}
</div>

Controlled

Use controlled mode for full control over the input value.

Controlled Secret

Current value: my-secret-value

<script lang="ts">
  import { SensitiveInput, Button } from 'kumo-svelte';

  let value = $state('my-secret-value');
</script>

<div class="flex w-80 flex-col gap-4">
  <SensitiveInput
    label="Controlled Secret"
    {value}
    onValueChange={(next) => (value = next)}
  />
  <div class="text-sm text-kumo-subtle">
    Current value: <code class="text-kumo-default">{value}</code>
  </div>
  <div class="flex gap-2">
    <Button
      onclick={() => (value = 'new-secret-' + Date.now())}
      variant="primary"
      size="sm"
    >
      Change value
    </Button>
    <Button onclick={() => (value = '')} variant="secondary" size="sm">
      Clear
    </Button>
  </div>
</div>

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

<script lang="ts">
  import { SensitiveInput } from 'kumo-svelte';
</script>

<div class="flex w-80 flex-col gap-4">
  <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 and don't share it"
  />
</div>

API Reference

Prop	Type	Default	Description
autoComplete	`string`	`"off"`	Autocomplete attribute.
disabled	`boolean`	`false`	Disables the component.
readOnly	`boolean`	`false`	Makes the input read-only.
required	`boolean`	-	Marks the field as required.
class	`string`	-	Additional classes merged onto the root element.
id	`string`	-	Element id.
value	`string`	-	Controlled value.
size	`'xs' \| 'sm' \| 'base' \| 'lg'`	`"base"`	Size preset.
variant	`'default' \| 'error'`	`"default"`	Visual variant.
label	`FieldText`	-	Visible label content.
labelTooltip	`FieldText`	-	Optional help content for the label.
description	`FieldText`	-	Supporting description text.
error	`FieldError`	-	Validation error message or matcher.
defaultValue	`string`	`""`	Initial uncontrolled value.
onValueChange	`(value: string) => void`	-	Called when the value changes.
onCopy	`() => void`	-	Called after copying succeeds.
readonly	`boolean`	`false`	Makes the input read-only.
autocomplete	`string`	-	Autocomplete attribute.
oninput	`(event: Event) => void`	-	Input event handler.
onchange	`(event: Event) => void`	-	Change event handler.
onblur	`(event: FocusEvent) => void`	-	Blur event handler.
onkeydown	`(event: KeyboardEvent) => void`	-	Keydown event handler.