Textarea Ready

<duet-textarea expand label="Textarea label" placeholder="Placeholder text"> </duet-textarea>

<script>
  // Select the above textarea component
  var textarea = document.querySelector("duet-textarea")

  // Listen for change events.
  textarea.addEventListener("duetChange", function (e) {
    console.log("Change detected in textarea:", e.detail)
  })
</script>

<duet-textarea label="Textarea label" placeholder="Placeholder text"> </duet-textarea>

<duet-textarea disabled expand label="Textarea label" placeholder="Placeholder text" value="Some disabled content">
</duet-textarea>

<duet-textarea
  error="There’s a validation error"
  expand
  label="Textarea label"
  placeholder="Placeholder text"
  value="Some disabled content"
>
</duet-textarea>

<duet-textarea
  expand
  label="Textarea label"
  placeholder="Placeholder text"
  maxlength="100"
  counter-label="Merkkejä jäljellä"
  counter
>
</duet-textarea>

<duet-textarea
  expand
  label="Textarea label"
  placeholder="Placeholder text"
  maxlength="100"
  counter-label="merkkiä jäljellä"
  counter
  error="Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Consequuntur perspiciatis laborum in illum possimus cupiditate
    tempora illo doloremque magnam architecto quis amet iusto officia
    temporibus optio expedita atque, similique itaque!"
>
</duet-textarea>

<duet-textarea label="Textarea label" placeholder="Placeholder text" disallow-pattern="[^0-9,]"> </duet-textarea>

<duet-textarea expand label="Textarea label" placeholder="Placeholder text" caption="caption" echo-placeholder> </duet-textarea>

<duet-textarea expand label="Textarea label" placeholder="Placeholder text" caption="caption" > </duet-textarea>

<duet-textarea expand label="Textarea label" placeholder="Placeholder text" echo-placeholder> </duet-textarea>

<duet-textarea expand label="Textarea label" placeholder="Placeholder text"> </duet-textarea>

<duet-textarea expand label="Textarea label" placeholder="Placeholder text"  value="some value" caption="caption" echo-placeholder> </duet-textarea>

<duet-textarea expand label="Textarea label" placeholder="Placeholder text"  value="some value" caption="caption" > </duet-textarea>

<duet-textarea expand label="Textarea label" placeholder="Placeholder text"  value="some value" echo-placeholder> </duet-textarea>

<duet-textarea expand label="Textarea label" placeholder="Placeholder text" value="some value"> </duet-textarea>

<duet-card style="max-width: 240px">
  <duet-textarea expand label="Textarea label" placeholder="its a long placeholder"  value="some value" echo-placeholder> </duet-textarea>
</duet-card>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

• Textarea components uses a basic HTML <textarea> element behind the scenes and offers similar functionality and API for its users.
• label property is always required for an accessible textarea control.
• labelHidden property hides the above label visually, but still keeps it accessible for assistive technologies.
• Use role property to define a specific role attribute for the textarea.
• When you need to disable the textarea, use disabled property as it conveys this information correctly to assistive technologies as well.
• accessibleActiveDescendant property can be used to indicate the id of a related component’s visually focused element.
• accessibleAutocomplete property can be used to indicate what kind of user input completion suggestions are provided.
• accessibleControls property can be used to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.
• accessibleOwns property can be used to indicate the id of a component owned by the textarea.
• accessibleDescribedBy property can be used to indicate the id of a component which contains descriptive/help text related to the textarea.
• counterLabel must be used in conjunction with counter to provide an accessible label.

Additional considerations #

• Don’t use the placeholder property to provide information that is required to use the textarea.