Pass standard HTML input attributes like `autoComplete`, `autoCorrect`, `spellCheck`, and `data-*` to suppress browser and password manager autocomplete overlays.
+
+
+
+
### ResultItem with Breadcrumbs
diff --git a/packages/kumo/src/components/command-palette/command-palette.tsx b/packages/kumo/src/components/command-palette/command-palette.tsx
index 280457a4ab..d1b8a9804a 100644
--- a/packages/kumo/src/components/command-palette/command-palette.tsx
+++ b/packages/kumo/src/components/command-palette/command-palette.tsx
@@ -25,6 +25,7 @@ import {
import type {
HighlightRange,
CommandPaletteRootProps,
+ CommandPaletteInputProps,
CommandPaletteListProps,
CommandPaletteGroupProps,
CommandPaletteGroupLabelProps,
@@ -731,21 +732,12 @@ function PanelInput({
leading,
trailing,
...props
-}: {
- autoFocus?: boolean;
- placeholder?: string;
- className?: string;
- onKeyDown?: (e: React.KeyboardEvent) => void;
- /** Optional leading content (e.g., back button) */
- leading?: React.ReactNode;
- /** Optional trailing content (e.g., Esc button) */
- trailing?: React.ReactNode;
-}) {
+}: CommandPaletteInputProps) {
const { onInputKeyDown } = useContext(PanelContext);
const { onClose } = useContext(DialogContext);
const handleKeyDown = useCallback(
- (e: React.KeyboardEvent) => {
+ (e: React.KeyboardEvent) => {
// Let consumer handle first (e.g., for custom Escape/Backspace behavior)
onKeyDownProp?.(e);
if (e.defaultPrevented) return;
diff --git a/packages/kumo/src/components/command-palette/index.ts b/packages/kumo/src/components/command-palette/index.ts
index 2ce4ad0399..f052af9af9 100644
--- a/packages/kumo/src/components/command-palette/index.ts
+++ b/packages/kumo/src/components/command-palette/index.ts
@@ -6,6 +6,7 @@ export {
export type {
HighlightRange,
CommandPaletteRootProps,
+ CommandPaletteInputProps,
CommandPaletteItemProps,
CommandPaletteFooterProps,
CommandPaletteListProps,
diff --git a/packages/kumo/src/components/command-palette/types.ts b/packages/kumo/src/components/command-palette/types.ts
index 94e1f1c8f3..ce7a643600 100644
--- a/packages/kumo/src/components/command-palette/types.ts
+++ b/packages/kumo/src/components/command-palette/types.ts
@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, InputHTMLAttributes } from "react";
import type { PortalContainer } from "../../utils/portal-provider";
/** A single highlight range within a string [startIndex, endIndex] (inclusive) */
@@ -160,3 +160,20 @@ export interface CommandPaletteResultItemProps {
/** Whether this item is non-interactive (no hover/highlight) */
nonInteractive?: boolean;
}
+
+/**
+ * Props for the CommandPalette.Input component - search input inside the palette.
+ *
+ * Extends standard HTML input attributes so you can pass props like
+ * `autoComplete`, `autoCorrect`, `autoCapitalize`, `spellCheck`, `data-*`, etc.
+ */
+export interface CommandPaletteInputProps
+ extends Omit<
+ InputHTMLAttributes,
+ "children" | "defaultValue" | "defaultChecked" | "color"
+ > {
+ /** Optional leading content (e.g., back button) */
+ leading?: ReactNode;
+ /** Optional trailing content (e.g., Esc button) */
+ trailing?: ReactNode;
+}
diff --git a/packages/kumo/src/index.ts b/packages/kumo/src/index.ts
index 2e2b334716..98e1077c9d 100644
--- a/packages/kumo/src/index.ts
+++ b/packages/kumo/src/index.ts
@@ -172,6 +172,7 @@ export {
KUMO_COMMAND_PALETTE_VARIANTS,
KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS,
type CommandPaletteRootProps,
+ type CommandPaletteInputProps,
type CommandPaletteItemProps,
type CommandPaletteResultItemProps,
type CommandPaletteFooterProps,