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 JavaScript 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<MdsInputEventDetail> |

Shadow Parts

| Part | Description | | ---------- | ----------------------- | | "select" | The select HTML element |

Dependencies

Depends on

• mds-input-tip
• mds-input-tip-item

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:4px

Built with love @ Gruppo Maggioli from R&D Department