LegnoTextInput

Examples

Example 1 - Default

Name

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

WARNING

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

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

<div class="legno-text-input legno-text-input--has-value">
  <input type="text" value="John" />
  <label>Name</label>
</div>

Example 2 - Disabled

Name

<legno-text-input 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-input--has-value adds floating label support
• legno-text-input--invalid shows invalid state

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

Example 3 - Validation error

Name

Feltet må ha en verdi!

<legno-text-input 
  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-input--has-value adds floating label support
• legno-text-input--invalid shows invalid state

<div class="legno-text-input legno-text-input--has-value legno-text-input--invalid">
  <input type="text" value="John" />
  <label>Name</label>
</div>

Slots

...

Props

...