InputField

Shared single-line input chrome with optional prefix/suffix adornments and a global cmd/ctrl keyboard shortcut. Consumers keep native input semantics while sharing the clicky border, focus ring, and density tokens.

Source

Import

import { InputField } from "@flanksource/clicky-ui/components";

Demos

No dedicated Storybook demo is available for this component yet.

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
as	enum	input	—
hotkey	string	—	Shortcut to bind, in `useHotkey` combo syntax (`"mod+k"`, `"mod+shift+p"`), where `mod` is ⌘ on macOS and Ctrl elsewhere. Preferred over `shortcutKey`: it matches modifiers exactly, whereas a key derived from the `shortcut` badge cannot express them.
inputClassName	string	—	Classes applied to the native input.
invalid	boolean	—	Marks the control as invalid: renders a destructive border and sets aria-invalid on the native element. Purely presentational — the consumer decides what invalid means, exactly as `Combobox`'s own `invalid` does.
onChange	(…) => …	—	Called with the next text value.
onShortcut	(…) => …	—	Called before the field is focused when the shortcut is pressed.
prefix	ReactNode	—	Leading adornment rendered before the input.
shortcut	string | null	—	Keyboard-shortcut hint rendered as a trailing `<kbd>`. Pass `null` to hide it.
shortcutClassName	string	—	Classes applied to the shortcut badge.
shortcutKey	string	—	Override the key matched for cmd/ctrl shortcuts. Defaults to the shortcut's last character.
suffix	ReactNode	—	Trailing adornment rendered after the input and before the shortcut.
type	HTMLInputTypeAttribute	text	Native input type. Ignored when `as="textarea"`.
value	string	—	Controlled input value.