CommandInput() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ CommandInput() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/radix/ui-rtl/command.tsx lines 67–88

function CommandInput({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
  return (
    <div data-slot="command-input-wrapper" className="p-1 pb-0">
      <InputGroup className="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:ps-2!">
        <CommandPrimitive.Input
          data-slot="command-input"
          className={cn(
            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
            className
          )}
          {...props}
        />
        <InputGroupAddon>
          <SearchIcon className="size-4 shrink-0 opacity-50" />
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}