LegnoSelect

Examples

Example 1 - Default

Apple Orange Banana Fruit

<legno-select label="Fruit" :items="fruit" />

fruit = [
  { value: 1, text: 'Apple' },
  { value: 2, text: 'Orange' },
  { value: 3, text: 'Banana' }
]

WARNING

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

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

<div class="legno-select">
  <label>Fruit</label>
  <select>
    <option value=""></option>
    <option value="1">Apple</option>
    <option value="2">Orange</option>
    <option value="3">Banana</option>
  </select>
  <div class="legno-select__icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 390.024L16.466 150.49l28.931-28.932L256 332.151l210.603-210.593 28.931 28.932z"></path><path d="M2 150.49l43.397-43.398L256 317.685l210.603-210.593L510 150.49 256 404.5 2 150.49zm43.397-14.466L30.932 150.49 256 375.558 481.068 150.49l-14.465-14.466L256 346.616 45.397 136.024z" fill="none"></path></svg>
  </div>
</div>

Example 2 - Validation error

Apple Orange Banana Fruit

This is an error message

<legno-select 
  label="Fruit" 
  :items="fruit" 
  error-message="This is an error message" />

fruit = [
  { value: 1, text: 'Apple' },
  { value: 2, text: 'Orange' },
  { value: 3, text: 'Banana' }
]

WARNING

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

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

<div class="legno-select legno-select--invalid">
  <label>Fruit</label>
  <select>
    <option value=""></option>
    <option value="1">Apple</option>
    <option value="2">Orange</option>
    <option value="3">Banana</option>
  </select>
  <div class="legno-select__icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 390.024L16.466 150.49l28.931-28.932L256 332.151l210.603-210.593 28.931 28.932z"></path><path d="M2 150.49l43.397-43.398L256 317.685l210.603-210.593L510 150.49 256 404.5 2 150.49zm43.397-14.466L30.932 150.49 256 375.558 481.068 150.49l-14.465-14.466L256 346.616 45.397 136.024z" fill="none"></path></svg>
  </div>
  <div class="legno-select__error-message">
    This is an error message
  </div>
</div>

Slots

...

Props

...