UI Elements

HotkeyCapture

A component for capturing and displaying keyboard shortcuts or hotkey combinations.

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte
<input class="main" type="text" {placeholder} {disabled} bind:value bind:this={element} />

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface HotkeyCaptureProps {
  value?: string; // bindable
  placeholder?: string;
  active?: boolean; // bindable, (false)
  disabled?: boolean; // bindable, (false)
  element?: HTMLInputElement; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
}

Additional Props

  • active - Whether the component accepts input

Styling

To learn more, see Styling.

Variant Management

When the disabled prop is true, inactive is applied. When input is accepted (the active prop is true), active is applied; otherwise, neutral is applied. If the variant prop is specified, the specified value is applied instead of neutral.

Default Class Name

svs-hotkey-capture

Exports

Types

TypeScript
type HotkeyCaptureReqdProps = never;
type HotkeyCaptureBindProps = "value" | "active" | "disable" | "variant" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

With Interactive Variant

Preset for Demo
Enter variant as you like