• Textarea Specification
  • Owned by
  • Requires approval from
  • Signed off by
  • Revision History
  • Overview
    • Acceptance criteria
  • User stories
  • Functionality
    • End-User Experience
    • Developer Experience
      • Initialization
      • Value binding through attribute
      • Value binding through content projection
      • Form integration with prefix content
    • Localization
    • Keyboard navigation
  • API
    • Properties
    • Methods
    • Events
    • Slots
    • CSS Shadow Parts
  • Test scenarios
  • Accessibility
    • ARIA
    • RTL Support
  • Assumptions and Limitations

Web Development Team

Developer Name

1. Radoslav Karaivanov

Designer Name

1. Silvia Ivanova

• Simeon Simeonoff | Date:
• Svilen Dimchevski | Date:

• Radoslav Mirchev | Date:
• Damyan Petev | Date:

The <igx-textarea> represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

1. Should be able to initialize and update the value both through attribute/property and text projection.
2. Should participate in form submission and form validation.

Developer stories:

As a developer I expect to be able to:

• set a name attribute so that the control is identifiable in the context of a web form
• set a value so that the control can be programmatically initialized or updated
• set a value by slotting in text content in the control
• set a required attribute so that the control becomes mandatory in the context of a web form
• set a minlength attribute so that the control validates the minimum length of the provided value
• set a maxlength attribute so that the control validates the maximum length of the provided value
• set a disabled attribute so that the control can't be modified or interacted with
• set a readonly attribute so that the control can't be modified
• set a label attribute so that the user would know what to enter and easily differentiate between several components placed on the same page
• set a placeholder so that the user has a hint or an example of what to enter as a value
• slot content as a prefix/suffix so I can make more involved scenarios where icons/text/etc. are used as additional visual indication
• slot content as a helper text part so I can provide the end-user with additional guidance, validation state, etc.
• alter between filled and outlined styles in the context of Material styled view
• use the control in a native form

End-user stories:

As an end-user I expect to be able to:

• enter text in a multi-line editing field so I can provide data to a standard web form or other parts of an application
• have a visual indicator, such as an outline so that I when the control is on focus
• have different visual states so that I know how to interact with the control
• a label so that I can identify the control
• see helper text so that I get updates about my input such as counters, validation states, etc.
• have an asterisk glyph in the label so that I know that the control is required
• have prefix/suffix slots so that I can have more context for the purpose of the control

Design hand-off

The igc-textarea wraps a native textarea element inside its shadow DOM. As such it supports most of the attributes exposed by the native textarea element.

Binding a value to the igc-textarea is achieved either through the value attribute, or through slotting text in its default slot (similar to the native element).

If both are used, the slotted value takes precedence over the attribute value.

Form integration

The igc-textarea is a form associated custom element. When a name attribute is set and the component is placed inside a form parent, it will participate in the parent form submission and validation.

<igc-textarea></igc-textarea>

<igc-textarea value="Hello"></igc-textarea>

<igc-textarea>Hello</igc-textarea>

<form>
  <igc-textarea required name="comment" label="Your comment">
    <igc-icon name="write-comment" aria-hidden="true"></igc-icon>
  </igc-textarea>
</form>

No specific points are applicable for localization.

No additional implementation is required.

Automation

• Should initialize and render an igc-textarea.
• Should be able to set the value through an attribute.
• Should be able to set the value through projected text content in the default slot.
• Projected text content should take precedence over the value attribute.
• DOM mutations of the projected content should be reflected in the value of the component.
• Should emit input event when typing in the component.
• Should emit change event when an edit of the value is done.
• Should support the standard API for text-based inputs.
• Should integrate into form submission and validation.

• the internal textarea should have an aria-invalid attribute bound to the validity state of the control.

The component should work in Right to Left context without additional configuration.

Due to how the shadow DOM is structured, the component does not expose a cols attribute. Horizontal sizing is achieved through CSS.