2.0.5 • Published 9 months ago
@maggioli-design-system/mds-input-select v2.0.5
mds-input-select
This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
autoFocus | auto-focus | Specifies a short hint that describes the expected value of the element | boolean \| undefined | undefined |
autocomplete | autocomplete | Specifies a short hint that describes the expected value of the element | "on" \| undefined | undefined |
disabled | disabled | If true, the element is displayed as disabled | boolean \| undefined | false |
multiple | multiple | Specifies if the select should allow multiple options to be selected in the list | boolean \| undefined | false |
name | name | Is needed to reference the form data after the form is submitted | string \| undefined | undefined |
placeholder | placeholder | Specifies a short hint that describes the expected value of the element | string \| undefined | undefined |
required | required | Specifies that the element must be filled out before submitting the form | boolean \| undefined | false |
size | size | When multiple is set to true, represents the number or rows in the list that should be visible | number \| undefined | 0 |
value | value | Specifies the value of the component | null \| number \| string \| undefined | '' |
variant | variant | Sets the variant of the component | "error" \| "info" \| "success" \| "warning" \| undefined | undefined |
Events
| Event | Description | Type |
|---|---|---|
mdsInputSelectChange | Emits an InputChangeEventDetail when the value of the input element changes | CustomEvent<InputValue> |
Shadow Parts
| Part | Description |
|---|---|
"select" | The select HTML element |
Dependencies
Depends on
Graph
graph TD;
mds-input-select --> mds-input-tip
mds-input-select --> mds-input-tip-item
mds-input-tip-item --> mds-text
style mds-input-select fill:#f9f,stroke:#333,stroke-width:4pxBuilt with love @ Gruppo Maggioli from R&D Department