Textarea

import {Label, Textarea} from '@stroeer-labs/design-library/react';

export function TextareaDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Default</p>
                <Textarea placeholder="Type your message here." className="max-w-sm" />
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">With label</p>
                <div className="grid w-full max-w-sm gap-2">
                    <Label htmlFor="textarea-demo-bio">Bio</Label>
                    <Textarea id="textarea-demo-bio" placeholder="Tell us about yourself" />
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Disabled</p>
                <Textarea placeholder="Disabled" disabled className="max-w-sm" />
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Invalid</p>
                <Textarea placeholder="Invalid" aria-invalid className="max-w-sm" />
            </div>
        </div>
    );
}

import '@angular/compiler';
import {Component} from '@angular/core';
import {HlmLabelImports, HlmTextareaImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-textarea-demo',
    standalone: true,
    imports: [HlmTextareaImports, HlmLabelImports],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Default</p>
        <textarea hlmTextarea placeholder="Type your message here." class="max-w-sm"></textarea>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">With label</p>
        <div class="grid w-full max-w-sm gap-2">
          <label hlmLabel for="textarea-demo-bio-ng">Bio</label>
          <textarea hlmTextarea id="textarea-demo-bio-ng" placeholder="Tell us about yourself"></textarea>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Disabled</p>
        <textarea hlmTextarea placeholder="Disabled" disabled class="max-w-sm"></textarea>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Invalid</p>
        <textarea hlmTextarea placeholder="Invalid" forceInvalid class="max-w-sm"></textarea>
      </div>
    </div>
  `,
})
export class TextareaDemoComponent {}