Select
Description
<jp-select> is a form component with <select> functionality.
Attributes
| Name | Required | Type | Description |
|---|---|---|---|
| value | string | setter and getter | |
| options | ✓ | Array<{label?: string, value: string, disabled?: boolean}> | select options |
| disabled | boolean | determines if a selection is disabled | |
| required | boolean | determines if a selection is required | |
| requiredValidationMessage | string | validation message for when component does not satisfy required | |
| id | string | unique identifier | |
| name | ✓ | string | name of the form control |
| label | string | shows at the top of the field | |
| labelType | 'outside' or 'inside' | whether label is inside or outside of the field | |
| hint | string | shows 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...