KbdInputGroup() — ui Function Reference

Architecture documentation for the KbdInputGroup() function in kbd-input-group.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ KbdInputGroup() — ui Function Reference

Dependency Diagram

graph TD
  cb0f4238_d32f_d859_ebbe_aa16af8f064c["KbdInputGroup()"]
  a3cceecf_6f01_4c96_1aee_c874c0475cf8["kbd-input-group.tsx"]
  cb0f4238_d32f_d859_ebbe_aa16af8f064c -->|defined in| a3cceecf_6f01_4c96_1aee_c874c0475cf8
  style cb0f4238_d32f_d859_ebbe_aa16af8f064c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/kbd-input-group.tsx lines 9–24

export default function KbdInputGroup() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-6">
      <InputGroup>
        <InputGroupInput placeholder="Search..." />
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}