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
  5db277e2_2b2e_c87c_668b_22fdc51bc772["InputGroupTextareaExample()"]
  f2ab14ae_91f2_f404_2123_7d0174f7f6c5["input-group-textarea.tsx"]
  5db277e2_2b2e_c87c_668b_22fdc51bc772 -->|defined in| f2ab14ae_91f2_f404_2123_7d0174f7f6c5
  style 5db277e2_2b2e_c87c_668b_22fdc51bc772 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/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>
  )
}