Socket
Socket
Sign inDemoInstall

@vonage/vwc-select

Package Overview
Dependencies
9
Maintainers
3
Versions
124
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @vonage/vwc-select

select component


Version published
Maintainers
3
Created

Changelog

Source

2.45.0 (2024-02-21)

Features

  • icon: update icons set version to 4.5.0 (595efb2)

Readme

Source

vwc-select

vwc-select is a drop-down kind of input element.

This component is an extension of <mwc-select>.

Usage

Import the component in your context, to get it initialized:

import '@vonage/vwc-select/vwc-select.js';

//	or, to be able to use casting in TypeScript, do

import { VWCSelect } from '@vonage/vwc-select/vwc-select.js';

import '@vonage/vwc-list/vwc-list-item.js';

We suggest as a rule of thumb to use vwc-list-item component to provide the list of options. vwc-list-item is capable of holding any content, from simple text to rich HTML.

The following should provide you with a working example:

<vwc-select outlined label="VWC Select" helper="Helper text">
	<vwc-list-item></vwc-list-item>
	<vwc-list-item value="0">Item 0</vwc-list-item>
	<vwc-list-item value="1">Item 1</vwc-list-item>
</vwc-select>

Few points to pay attention to, in order to get the expected result:

  • Select will preselect the first item in the list (much like the native HTML select), so if one would like to start with empty value, stare the list with an empty item
  • Items MUST HAVE an attribute value with an actual values that you'd like to use in your applicative logic (except the empty choice); the text/content within the items is for labeling purposes only, should be considered as not logically reliable (think of localization down the road, or some rich HTML)

API

vwc-select exposes the following properties, methods and events:

Properties
PropertyModifiersTypeDescription
disabledboolean
helperstring
iconstring
indexreadonlynumber
itemsreadonlyListItemBase[]
labelstring
naturalMenuWidthboolean
outlinedboolean
requiredboolean
selectedreadonly`ListItemBase \null`
validateOnInitialRenderboolean
validationMessagestring
valuestring
appearanceghostno input border
Methods
MethodType
blur(): void
checkValidity(): boolean
click(): void
focus(): void
layout(updateItems?: boolean | undefined): Promise<void>
reportValidity(): boolean
select(index: number): void
setAriaLabel(label: string): void
setCustomValidity(message: string): void
Events
EventDescription
action{ActionDetail}
change
closed
invalid
opened
selected{SelectedDetail}

FAQs

Last updated on 21 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc