Textarea

<esa-textarea label="Description" placeholder="Describe the project…" help-text="Plain text only."></esa-textarea>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-textarea';

@Component({
  selector: 'app-textarea-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-textarea
      label="Description"
      placeholder="Describe the project…"
      help-text="Plain text only."
    ></esa-textarea>
  `,
})
export class TextareaDemo {}

<esa-textarea label="Fixed 5 rows" rows="5" placeholder="Five rows tall"></esa-textarea>
<esa-textarea label="Auto-resize" auto-resize max-rows="8" placeholder="Grows as you type, up to 8 rows"></esa-textarea>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-textarea';

@Component({
  selector: 'app-textarea-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-textarea label="Fixed 5 rows" rows="5" placeholder="Five rows tall"></esa-textarea>
    <esa-textarea
      label="Auto-resize"
      auto-resize
      max-rows="8"
      placeholder="Grows as you type, up to 8 rows"
    ></esa-textarea>
  `,
})
export class TextareaDemo {}

<esa-textarea label="Extra small" size="xs" placeholder="Extra small"></esa-textarea>
<esa-textarea label="Small" size="sm" placeholder="Small"></esa-textarea>
<esa-textarea label="Medium" size="md" placeholder="Medium"></esa-textarea>
<esa-textarea label="Large" size="lg" placeholder="Large"></esa-textarea>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-textarea';

@Component({
  selector: 'app-textarea-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-textarea label="Extra small" size="xs" placeholder="Extra small"></esa-textarea>
    <esa-textarea label="Small" size="sm" placeholder="Small"></esa-textarea>
    <esa-textarea label="Medium" size="md" placeholder="Medium"></esa-textarea>
    <esa-textarea label="Large" size="lg" placeholder="Large"></esa-textarea>
  `,
})
export class TextareaDemo {}

<esa-textarea label="Required" required placeholder="Cannot be empty"></esa-textarea>
<esa-textarea label="With error" error-text="A description is required." required></esa-textarea>
<esa-textarea label="Disabled" disabled value="Read only content"></esa-textarea>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-textarea';

@Component({
  selector: 'app-textarea-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-textarea label="Required" required placeholder="Cannot be empty"></esa-textarea>
    <esa-textarea label="With error" error-text="A description is required." required></esa-textarea>
    <esa-textarea label="Disabled" disabled value="Read only content"></esa-textarea>
  `,
})
export class TextareaDemo {}

<form>
  <esa-textarea label="Notes" name="notes" placeholder="Type then submit"></esa-textarea>
  <button type="submit">Submit</button>
</form>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-textarea';

@Component({
  selector: 'app-textarea-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <form>
      <esa-textarea label="Notes" name="notes" placeholder="Type then submit"></esa-textarea>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class TextareaDemo {}