## SignetSelect Properties | Property | Attribute | Description | Type | Default | | ----------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ----------- | | `defaultValue` | `default-value` | The `defaultValue` property is a string that represents the default value of the select component. It is used to initialize the selected value when the component is first rendered. | `string` | `undefined` | | `disabled` | `disabled` | The `disabled` property is a boolean that determines whether the select component is disabled. If set to true, users cannot interact with the component or select any options. | `boolean` | `false` | | `hasOnlySearch` | `has-only-search` | The `hasOnlySearch` property is a boolean that determines whether the select component only includes a search functionality. If set to true, users can only search for options within the dropdown menu, without selecting any options. | `boolean` | `false` | | `hasSearch` | `has-search` | The `hasSearch` property is a boolean that determines whether the select component includes a search functionality. If set to true, users can search for options within the dropdown menu. | `boolean` | `false` | | `items` | `items` | The `items` property is an alias for the `options` property, allowing users to pass options as an array or JSON string. It is maintained for backward compatibility but should be replaced with the `options` prop in new implementations. | `any` | `undefined` | | `label` | `label` | The `label` property is a string that represents the label for the select component. It is displayed above the selected value and can be used to provide context to the user. | `string` | `undefined` | | `modelValue` | `model-value` | The `modelValue` property enables two-way binding with v-model in Vue. | `string` | `undefined` | | `multiple` | `multiple` | The `multiple` property is a boolean that determines whether the select component allows multiple selections. If set to true, users can select more than one option from the list. | `boolean` | `false` | | `options` | `options` | The `options` property is an array or JSON string representing the options available in the select component. It can be an array of objects or a JSON string. Each object can contain properties such as `value`, `label`, and `disabled` to customize the appearance and behavior of each option. This single prop replaces the previous `items` prop for all option data. | `any[] \| string` | `undefined` | | `placeholder` | `placeholder` | The `placeholder` property is a string that represents the placeholder text for the select component. It is displayed when no option is selected and can be used to provide guidance to the user on what to select. | `string` | `undefined` | | `readonly` | `readonly` | The `readonly` property is a boolean that determines whether the select component is read-only. If set to true, users cannot change the selected value, but can still interact with the component. | `boolean` | `false` | | `required` | `required` | The `required` property determines if the select is required. If true, a colored asterisk will be shown in the label. | `boolean` | `false` | | `requiredAsteriskColor` | `required-asterisk-color` | The `requiredAsteriskColor` property allows customizing the color of the required asterisk in the label. Defaults to 'red' if not specified. | `string` | `'red'` | | `size` | `size` | The `size` property determines the size of the select component. It can be set to 'sm', 'md', 'lg', 'small', 'medium', or 'large' to adjust the appearance of the component accordingly. The default size is 'md'. | `"large" \| "lg" \| "md" \| "medium" \| "sm" \| "small"` | `'md'` | | `value` | `value` | The `value` property is added for Vue 2 v-model compatibility. | `string` | `undefined` | ## SignetSelect Events | Event | Description | Type | | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | | `hidden` | The `hidden` event is emitted when the select component is hidden. It can be used to trigger actions or updates in other parts of the application when the dropdown menu is closed. | `CustomEvent` | | `optionSelected` | The `optionSelected` event is emitted when an option is selected from the dropdown menu. It can be used to trigger actions or updates in other parts of the application based on the selected option. | `CustomEvent` | | `selectedValue` | The `selectedValue` event is emitted when an option is selected from the dropdown menu. It can be used to trigger actions or updates in other parts of the application based on the selected value. | `CustomEvent` | | `shown` | The `shown` event is emitted when the select component is shown. It can be used to trigger actions or updates in other parts of the application when the dropdown menu is opened. | `CustomEvent` | | `updateModelValue` | The `updateModelValue` event is emitted for v-model compatibility in Vue. | `CustomEvent` | ## SignetSelect Methods ### `hide() => Promise` The `hide` method is used to hide the select component's dropdown menu. It sets the `isExpanded` state to false and emits the `hidden` event. This method can be called programmatically to close the dropdown menu. #### Returns Type: `Promise` A promise that resolves when the dropdown menu is hidden. ### `show() => Promise` The `show` method is used to display the select component's dropdown menu. It sets the `isExpanded` state to true and emits the `shown` event. This method can be called programmatically to open the dropdown menu. #### Returns Type: `Promise` A promise that resolves when the dropdown menu is shown. ## Dependencies ### Used by - [datagrid-filter-dropdown](../datagrid-filters) - [datagrid-filter-dropdown-logic](../datagrid-filters) ### Depends on - [signet-option](../signet-option) - [signet-icon](../signet-icon) ### Graph ```mermaid graph TD; signet-select --> signet-option signet-select --> signet-icon datagrid-filter-dropdown --> signet-select datagrid-filter-dropdown-logic --> signet-select style signet-select fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- *Built with Signet Design System*