TextArea Label

Flow
1

Hi,

How can we set TextArea’s label alignment? There is no method for it.

2

Hi,

in the shadow-root of your TextArea, there is an element called . Try to get hold of that element and change the “align-self” value (flex-start by default)

3

it is called label part=“label” id=…

4

Thanks you. I used this code for it:

<vaadin-text-field class="custom-style" label="Label" value="Value"></vaadin-text-field>
<vaadin-password-field class="custom-style" label="Label" value="Value"></vaadin-password-field>
<vaadin-text-area class="custom-style" label="Label" value="Value"></vaadin-text-area>

<!-- Place in index.html or in a separate HTML import -->
 <dom-module id="text-textarea-theme" theme-for="vaadin-text-area">
	  <template>
		<style>
		  :host {
			--vaadin-text-area-default-width: 18em;
		  }
      
      /* Unsupported selector, can break in any version (although unlikely) */
      .vaadin-text-area-container {
        flex-direction: row;
      }
      
      [part="label"]

{
flex: none;
}

      :host(:not([invalid]

)) [part=“error-message”]
{
display: none;
}

      [part="error-message"]

{
min-width: 10em;
}

      [part="label"]

,
[part=“input-field”]
,
[part=“error-message”]
{
align-self: baseline;
}