CommandInput() — ui Function Reference

Architecture documentation for the CommandInput() function in command.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ CommandInput() — ui Function Reference

Dependency Diagram

graph TD
  ee3580f6_bbaf_4f2d_bcb8_4f3b89700e1f["CommandInput()"]
  28611210_7d61_d0c9_2117_f6f1cdf206c1["command.tsx"]
  ee3580f6_bbaf_4f2d_bcb8_4f3b89700e1f -->|defined in| 28611210_7d61_d0c9_2117_f6f1cdf206c1
  style ee3580f6_bbaf_4f2d_bcb8_4f3b89700e1f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/ui/command.tsx lines 69–97

function CommandInput({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
  return (
    <div data-slot="command-input-wrapper" className="cn-command-input-wrapper">
      <InputGroup className="cn-command-input-group">
        <CommandPrimitive.Input
          data-slot="command-input"
          className={cn(
            "cn-command-input outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
            className
          )}
          {...props}
        />
        <InputGroupAddon>
          <IconPlaceholder
            lucide="SearchIcon"
            tabler="IconSearch"
            hugeicons="SearchIcon"
            phosphor="MagnifyingGlassIcon"
            remixicon="RiSearchLine"
            className="cn-command-input-icon"
          />
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}