LegnoTextArea

Examples

Example 1 - Default

Name

<legno-text-area value="John" label="Name" />

WARNING

When using plain HTML you need to toggle these css classes manually on the root element:

• legno-text-area--has-value adds floating label support
• legno-text-area--invalid shows invalid state

<div class="legno-text-area legno-text-area--has-value">
  <textarea value="John"></textarea> 
  <label>Name</label>
</div>

Example 2 - Disabled

Name

<legno-text-area value="John" label="Name" :disabled="true" />

WARNING

When using plain HTML you need to toggle these css classes manually on the root element:

• legno-text-area--has-value adds floating label support
• legno-text-area--invalid shows invalid state

<div class="legno-text-area legno-text-area--has-value">
  <textarea value="John" disabled="disabled"></textarea> 
  <label>Name</label>
</div>

Example 3 - Validation error

Name

Feltet må ha en verdi!

<legno-text-area 
  value="John" 
  label="Name" 
  error-message="Feltet må ha en verdi!" />

WARNING

When using plain HTML you need to toggle these css classes manually on the root element:

• legno-text-area--has-value adds floating label support
• legno-text-area--invalid shows invalid state

<div class="legno-text-area legno-text-area--has-value legno-text-area--invalid">
  <input type="text" value="John" />
  <label>Name</label>
  <div class="legno-text-area__error-message">
    Feltet må ha en verdi!
  </div>
</div>

Slots

...

Props

...