npm package: @maggioli-design-system/mds-input-select
Description: mds-input-select is a web-component from Magma Design System, 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.
Author: Vittorio Vittori
Latest version: 3.7.0

# mds-input-select



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), 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.

<!-- Auto Generated Below -->


## 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` |
| `defaultValue` | `default-value` | Specifies the default value of the component                                                       | `null \| number \| string \| 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>` |


## Methods

### `setValue(value: string | number | null) => Promise<void>`

Sets the value of the component

#### Parameters

| Name    | Type                       | Description |
| ------- | -------------------------- | ----------- |
| `value` | `string \| number \| null` |             |

#### Returns

Type: `Promise<void>`



### `updateLang() => Promise<void>`



#### Returns

Type: `Promise<void>`




## Shadow Parts

| Part        | Description                                           |
| ----------- | ----------------------------------------------------- |
| `"select"`  | The select HTML element                               |
| `"tip-top"` | Selects the verbose status of input on top of element |


## Dependencies

### Depends on

- [mds-input-tip](../mds-input-tip)
- [mds-input-tip-item](../mds-input-tip-item)

### Graph
```mermaid
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](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)