InputGroupTextareaExample() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ InputGroupTextareaExample() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/base/input-group-textarea.tsx lines 15–45

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>
  )
}