InputGroupTextareaExamples() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ InputGroupTextareaExamples() — ui Function Reference

Dependency Diagram

graph TD
  4c8ddd7f_978b_4c4e_5737_71f2522b2839["InputGroupTextareaExamples()"]
  2ee775ba_314e_270a_6c03_65d0c8e63d96["input-group-textarea-examples.tsx"]
  4c8ddd7f_978b_4c4e_5737_71f2522b2839 -->|defined in| 2ee775ba_314e_270a_6c03_65d0c8e63d96
  style 4c8ddd7f_978b_4c4e_5737_71f2522b2839 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/input-group-textarea-examples.tsx lines 24–155

export function InputGroupTextareaExamples() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="textarea-header-footer-12">
          Default Textarea (No Input Group)
        </FieldLabel>
        <Textarea
          id="textarea-header-footer-12"
          placeholder="Enter your text here..."
        />
      </Field>
      <Field>
        <FieldLabel htmlFor="textarea-header-footer-13">Input Group</FieldLabel>
        <InputGroup>
          <InputGroupTextarea
            id="textarea-header-footer-13"
            placeholder="Enter your text here..."
          />
        </InputGroup>
        <FieldDescription>
          This is a description of the input group.
        </FieldDescription>
      </Field>
      <Field data-invalid="true">
        <FieldLabel htmlFor="textarea-header-footer-14">Invalid</FieldLabel>
        <InputGroup>
          <InputGroupTextarea
            id="textarea-header-footer-14"
            placeholder="Enter your text here..."
            aria-invalid="true"
          />
        </InputGroup>
        <FieldDescription>
          This is a description of the input group.
        </FieldDescription>
      </Field>
      <Field data-disabled="true">
        <FieldLabel htmlFor="textarea-header-footer-15">Disabled</FieldLabel>
        <InputGroup>
          <InputGroupTextarea
            id="textarea-header-footer-15"
            placeholder="Enter your text here..."
            disabled
          />
        </InputGroup>
        <FieldDescription>
          This is a description of the input group.
        </FieldDescription>
      </Field>
      <Field>
        <FieldLabel htmlFor="prompt-31">Addon (block-start)</FieldLabel>
        <InputGroup>
          <InputGroupTextarea id="prompt-31" />
          <InputGroupAddon align="block-start">
            <InputGroupText>Ask, Search or Chat...</InputGroupText>
            <InfoIcon className="text-muted-foreground ml-auto" />
          </InputGroupAddon>
        </InputGroup>
        <FieldDescription>
          This is a description of the input group.
        </FieldDescription>
      </Field>
      <Field>
        <FieldLabel htmlFor="textarea-header-footer-30">
          Addon (block-end)
        </FieldLabel>
        <InputGroup>
          <InputGroupTextarea
            id="textarea-header-footer-30"
            placeholder="Enter your text here..."
          />
          <InputGroupAddon align="block-end">
            <InputGroupText>0/280 characters</InputGroupText>
            <InputGroupButton
              variant="default"
              size="icon-xs"
              className="ml-auto rounded-full"
            >
              <ArrowUpIcon />
              <span className="sr-only">Send</span>