Skip to main content

Select

Description

<jp-select> is a form component with <select> functionality.


Attributes

NameRequiredTypeDescription
valuestringsetter and getter
optionsArray<{label?: string, value: string, disabled?: boolean}>select options
disabledbooleandetermines if a selection is disabled
requiredbooleandetermines if a selection is required
requiredValidationMessagestringvalidation message for when component does not satisfy required
idstringunique identifier
namestringname of the form control
labelstringshows at the top of the field
labelType'outside' or 'inside'whether label is inside or outside of the field
hintstringshows below the field


Slots

This component does not have any slots.



Methods

  • getValue
    • returns form field value
  • reportValidity
    • triggers reportValidity


Events

  • value
    • triggers when item is selected


Demo

Live Editor
// import '@jaspero/web-components/select.wc.js';
// import '@jaspero/web-components/select.css';

<jp-select options='[{"value":"aaa"}, {"value":"bbb"}, {"value":"ccc"}]' label="Select"></jp-select>
Result
Loading...