@valle/valle-select NPM

valle-select

Awesome valle-select - Web Component using Polymer 3

How to install and use:

1 - Install the element using Yarn:

$ yarn add @valle/valle-select

2 - Import the element:

<script type="module" src="node_modules/@valle/valle-select/valle-select.js"></script>

or in your javascript file

import "@valle/valle-select/valle-select.js";

3 - Start using it!

<valle-select label="Names" helpertext="Choose your name">
  <valle-option value="option 1">Example 1</valle-option>
  <valle-option value="option 2">Example 2</valle-option>
  <valle-option value="option 3">Example 3</valle-option>
</valle-select>

<valle-select>

Properties

Property	Type	Default	Description
`label`	String	`""`	Default label
`disabled`	Boolean	`false`	Disabled state
`required`	Boolean	`false`	Required validate
`helpertext`	String	`""`	Description text for help
`errortext`	String	`""`	Error message
`placeholder`	String	`""`	Default placeholder
`error`	Boolean	`false`	Error state
`open`	Boolean	`false`	Open state
`autofocus`	Boolean	`false`	Default autofocus
`tooltip`	String	`""`	A tooltip for inputs
`tooltippos`	String	`""`	Tooltip position (available: `top-right`)
`tooltiplength`	String	`""`	Tooltip length (available: `small`, `medium` and `large`)

Styling

The following custom properties and mixins are available for styling:

Custom property	Default	Description
--valle-select-color	`rgba(5, 159, 183, .87)`	Primary color
--valle-input-width	`100%`	Select width
--icon-tooltip-color	`#000`	Icon tooltip color

API

The following properties are available via javascript:

Property	Type	Description
value	`String`	Selected value from option content
data-valle-value	`String`	Selected value from option value
disabled	`Boolean`	Disabled state
options	`Array`	All `valle-options` available
open	`Boolean`	Open state
error	`Boolean`	Error state
current	`Object`	Selected `valle-options`