InputGroupTextareaExample() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ InputGroupTextareaExample() — ui Function Reference

Dependency Diagram

graph TD
  4f6bf7db_59ac_9aac_5d0e_7ed7d0ec4743["InputGroupTextareaExample()"]
  7d6f15e1_988f_029a_80a3_3096588795fb["input-group-textarea.tsx"]
  4f6bf7db_59ac_9aac_5d0e_7ed7d0ec4743 -->|defined in| 7d6f15e1_988f_029a_80a3_3096588795fb
  style 4f6bf7db_59ac_9aac_5d0e_7ed7d0ec4743 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/input-group-textarea.tsx lines 16–46

export default function InputGroupTextareaExample() {
  return (
    <div className="grid w-full max-w-md gap-4">
      <InputGroup>
        <InputGroupTextarea
          id="textarea-code-32"
          placeholder="console.log('Hello, world!');"
          className="min-h-[200px]"
        />
        <InputGroupAddon align="block-end" className="border-t">
          <InputGroupText>Line 1, Column 1</InputGroupText>
          <InputGroupButton size="sm" className="ml-auto" variant="default">
            Run <IconCornerDownLeft />
          </InputGroupButton>
        </InputGroupAddon>
        <InputGroupAddon align="block-start" className="border-b">
          <InputGroupText className="font-mono font-medium">
            <IconBrandJavascript />
            script.js
          </InputGroupText>
          <InputGroupButton className="ml-auto" size="icon-xs">
            <IconRefresh />
          </InputGroupButton>
          <InputGroupButton variant="ghost" size="icon-xs">
            <IconCopy />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}