# select

Form control enabling users to select items in a list of options.

Select component on a Quick App

(Example code)

# Children Elements

This element only supports option elements as children nodes.

# Attributes

This element supports the common attributes.

# CSS Properties

In addition to the common styles, this element supports the following styling properties:

# color

Color of the font.

  • Type: <color>
  • Default value: (system)
  • Mandatory: no

# font-size

Font size.

  • Type: <length>
  • Default value: (system)
  • Mandatory: no

# font-weight

Weight of the font.

  • Type: string (lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal | bold | bolder)
  • Default value: normal
  • Mandatory: no

# text-decoration

Decoration options to the text.

  • Type: string (underline | line-through | none)
  • Default value: none
  • Mandatory: no

# font-style

Font style selected from the font family.

  • Type: string (italic | normal)
  • Default value: normal
  • Mandatory: no

# font-family

Font family of for the text.

  • Type: string
  • Default value: -
  • Mandatory: no

To customize fonts, please refer font-face style.

# Events

This element support the common events, with the exception of click, longpress, and swipe. Apart from this, the element supports the following event:

# change

This event is triggered when the selected value in the list changes.

Additional parameters:

  • { newValue: string }. A string with the new value in the selection.

# Methods

This element does not have additional methods.

# Example

<template>
  <div class="container">
    <div class="case-title mt-item">
      <text class="title">What is your favourite fruit?</text>
    </div>
    <div class="mlr-container select-container bro-s">
      <select class="select">
        <option value="item1">Orange</option>
        <option value="item2" selected="true">Banana</option>
        <option value="item3">Lemon</option>
        <option value="item4">Strawberry</option>
        <option value="item5">Blueberry</option>
      </select>
    </div>
  </div>
</template>

<style lang="sass">
  .select-container{
    background-color: #fff;
    padding-right: 14px;
  }
  .select{
    width: 100%;
    height: 100px;
  }
</style>