Skip to main content
LocalTapiola Turva

Textarea ready

Textarea specifies a control that allows user to write text over multiple rows. Used when the expected user input is long. For shorter input, use the Input component.

You can use native HTML5 validation with Textarea component via validation properties. This allows you to specify rules like whether a value needs to be filled in and the minimum and maximum length of the data.

Examples

Open in new window
<duet-textarea expand label="Textarea label" placeholder="Placeholder text"></duet-textarea>

<script>
  var textarea = document.querySelector("duet-textarea")
  textarea.addEventListener("duetInput", function(e) {
    console.log("User input detected", e)
  })
  textarea.addEventListener("duetChange", function(e) {
    console.log("Change detected", e)
  })
</script>
Open in new window
<duet-textarea disabled expand label="Textarea label" placeholder="Placeholder text" value="Some disabled content"></duet-textarea>
Open in new window
<duet-textarea error="There’s a validation error" expand label="Textarea label" placeholder="Placeholder text" value="Some disabled content"></duet-textarea>

Properties #

PropertyAttributeDescriptionTypeDefault
accessibleActiveDescendantaccessible-active-descendantIndicates the id of a related component’s visually focused element.stringundefined
accessibleAutocompleteaccessible-autocompleteIndicates what kind of user input completion suggestions are provided.stringundefined
accessibleControlsaccessible-controlsUse this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.stringundefined
accessibleOwnsaccessible-ownsIndicates the id of a component owned by the textarea.stringundefined
debouncedebounceSet the amount of time, in milliseconds, to wait to trigger the duetChange event after each keystroke.number0
disableddisabledMakes the textarea component disabled. This prevents users from being able to interact with the textarea, and conveys its inactive state to assistive technologies.booleanfalse
errorerrorDisplay the textarea in error state along with an error message.string""
expandexpandExpands the textarea to fill 100% of the container width.booleanfalse
identifieridentifierAdds a unique identifier for the textarea.stringundefined
labellabelLabel for the textarea.string"label"
labelHiddenlabel-hiddenVisually hide the label, but still show it to screen readers.booleanfalse
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
maxlengthmaxlengthUse maxlength to specify the maximum length of the value that can be entered. Please note that this uses native HTML5 pattern validation.numberundefined
minlengthminlengthUse minlength to specify the minimum length of the value that can be entered. Please note that this uses native HTML5 pattern validation.numberundefined
namenameName of the textarea.stringundefined
placeholderplaceholderHint text to display.stringundefined
requiredrequiredSet whether the textarea is required or not.booleanfalse
roleroleDefines a specific role attribute for the input.stringundefined
themethemeTheme of the textarea. Can be one of: "default", "turva".string""
tooltiptooltipTooltip to display next to the label of the input.string""
valuevalueValue of the textarea.stringundefined

Events #

EventDescriptionType
duetBlurEmitted when the input loses focus.CustomEvent<any>
duetChangeEmitted when the value has changed.CustomEvent<any>
duetFocusEmitted when the input has focus.CustomEvent<any>
duetInputEmitted when a keyboard input ocurred.CustomEvent<any>

Methods #

setFocus() => Promise<void> #

Sets focus on the specified duet-textarea. Use this method instead of the global
textarea.focus().

Returns #

Type: Promise<void>

Dependencies #

Depends on #

Graph #

graph TD;
  duet-textarea --> duet-label
  duet-textarea --> duet-tooltip
  duet-tooltip --> duet-visually-hidden
  style duet-textarea fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.