InputGroupTextareaExample() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ InputGroupTextareaExample() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/app/(app)/(root)/components/input-group-textarea.tsx lines 16–46

export 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-[180px]"
        />
        <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">
            <IconRefresh />
          </InputGroupButton>
          <InputGroupButton variant="ghost">
            <IconCopy />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}