Sensitive Input - Kumo Svelte

Installation

import { SensitiveInput } from 'kumo-svelte';

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

<script lang="ts">  import { SensitiveInput } from 'kumo-svelte';</script><SensitiveInput label="Secret" defaultValue="my-secret-key" />

SensitiveInput supports multiple sizes to fit different contexts.

Use controlled mode for full control over the input value.

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

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.