Command Input

An input-like trigger used to open command palettes or search dialogs, supporting icons, keyboard shortcuts, and custom placeholders

'use client'

import { CommandInput } from '@fidely-ui/react/command-input'

export const CommandInputDemo = () => {
  return (
    <CommandInput
      placeholder="Search...."
      onOpen={() => alert('Open Command')}
    />
  )
}

Usage

import { CommandInput } from '@fidely-ui/react'

<CommandInput onOpen={() => console.log('Open command palette')} />

The CommandInput component acts as a trigger for opening a command palette or search dialog. It supports keyboard shortcuts, icons, and custom placeholder text.

With Custom Icon

'use client'

import { CommandInput } from '@fidely-ui/react/command-input'
import { LuUserRoundSearch } from 'react-icons/lu'

export const CommandInputIcon = () => {
  return (
    <CommandInput
      placeholder="Search docs...."
      leftElement={<LuUserRoundSearch />}
    />
  )
}

You can override the default shortcut (⌘ + K on Mac or Ctrl + K on Windows) using the shortcut prop.

'use client'

import { CommandInput } from '@fidely-ui/react/command-input'

export const CommandInputShortcut = () => {
  return (
    <CommandInput
      onOpen={() => console.log('Shortcut triggered')}
      shortcut="Ctrl + Shift + P"
    />
  )
}

Responsive Behavior

On mobile devices, the keyboard shortcut display is automatically hidden to ensure a clean UI.

When the user presses the defined shortcut, the onOpen callback is automatically triggered (except on mobile devices).

Accessibility

The CommandInput uses a semantic button role with aria-haspopup="dialog" for accessibility, making it discoverable by assistive technologies as a command or dialog trigger.

Props

CommandInput