General
Getting Started
Quick Install
Using with Cordova
Using with Ionic
Mobiscroll CLI
ES6 Modules
Instance
Customizing the Look and Feel
Upgrade From Trial
Utility functions
Update version
Upgrade Guide v4
Date & Time pickers
Event Calendar
Form components
Accordion
Alerts & Notifications
Buttons
Checkbox
Dropdown
Forms
Progress
Radio Buttons
Rating
Segmented
Slider
Stepper
Switch
Textfields
Timer
Responsive list
Numeric pickers
Pickers & dropdowns
Layout & navigation
Tools
Accessibility
Select
With label
<mbsc-dropdown label="Choose one">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>With dynamic options
<mbsc-dropdown label="Choose one">
<option *ngFor="let opt of myOptions" [value]="opt.value" >{{opt.text}}</option>
</mbsc-dropdown>Using with Ionic
The dropdown component can be used tha same way with Ionic, as any other angular component.
Attributes
| Name | Description |
|---|---|
| icon |
Specify icons for a form component. A font-icon name should be passed.
Icon alignment can be controlled with the icon-align attribute. Icons can be displayed on both sides by passing and object with left and right properties containing icon names,
e.g.: icon='{ "right": "plus", "left": "minus" }'.
You can build your custom icon set on our download page ("Choose Icon Set" section).
See the full list of available icons here. The default icon pack contains the following icons: You can use the icons anywhere in your app using thembsc-ic mbsc-ic-{iconName} classes, e.g.:
|
| icon-align |
Specify icon alignment. It can be "left" or "right", it defaults to "left" if not specified.
|
| [label] | Label for the dropdown. |
| [disabled] | If an element has the disabled attribute, the element will be disabled. |
| [readonly] | If an element has the readonly attribute, the element won't change it's value on user input. |
| input-style | Defines the input rendering mode. Possible values: "underline", "box", "outline". |
| label-style | Defines the position of the label. Possible values: "stacked", "inline", "floating". |
| [name] | Name attribute for the dropdown. |
| [error] | When true, the dropdown will be rendered with invalid styling |
| [errorMessage] | The error message, that will be shown when the field is invalid. |
Icons
With left icon
<mbsc-dropdown label="Choose one" icon="line-note">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>With right icon
<mbsc-dropdown label="Choose one" icon="line-note" icon-align="right">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>Input style
This attribute can be used for customizing your form input rendering.
Underline input style
<mbsc-dropdown label="Choose one" input-style="underline">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>Box input style
<mbsc-dropdown label="Choose one" input-style="box">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>Outline input style
<mbsc-dropdown label="Choose one" input-style="outline">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>Label style
With this attribute you can define the position of the label.
Stacked label style
<mbsc-dropdown label="Choose one" label-style="stacked">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>Inline label style
<mbsc-dropdown label="Choose one" label-style="inline">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>Floating label style
<mbsc-dropdown label="Choose one" label-style="floating">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>For many more examples - simple and complex use-cases - check out the select demos for angular.
Dropdown theming
Global variables of the Dropdown, Input, Password and Textarea
| Variable name | Description |
|---|---|
| $mbsc-input-background-light | Sets the background color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-input-background-dark | |
| $mbsc-input-text-light | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-input-text-dark | |
| $mbsc-form-input-border-light | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-form-input-border-dark | |
| $mbsc-input-accent-light | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-input-accent-dark | |
| $mbsc-input-error-light | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-input-error-dark |
iOS theme
The following variables are specific to the iOS theme light variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-ios-input-background | #ffffff | Sets the background color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-ios-input-text | #000000 | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-ios-input-border | #cccccc | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-ios-input-error | #d8332a | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
iOS Dark theme
The following variables are specific to the iOS theme dark variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-ios-dark-input-background | #0f0f0f | Sets the background color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-ios-dark-input-text | #ffffff | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-ios-dark-input-border | #333333 | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-ios-dark-input-error | #d8332a | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Underline examples
Box examples
Outline examples
Windows theme
The following variables are specific to the Windows theme light variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-windows-input-text | #262626 | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-windows-input-border | #999999 | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-windows-input-accent | #0078d7 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-windows-input-error | #d30101 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Windows Dark theme
The following variables are specific to the Windows theme dark variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-windows-dark-input-text | #ffffff | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-windows-dark-input-border | #737373 | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-windows-dark-input-accent | #0078d7 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-windows-dark-input-error | #d30101 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Underline examples
Box examples
Outline examples
Material theme
The following variables are specific to the Material theme light variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-material-input-background | #eeeeee | Sets the background color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-material-input-text | #6d6d6d | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-material-input-border | #6d6d6d | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-material-input-accent | #009688 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-material-input-error | #de3226 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Material Dark theme
The following variables are specific to the Material theme dark variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-material-dark-input-background | #303030 | Sets the background color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-material-dark-input-text | #d4d4d4 | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-material-dark-input-border | #d4d4d4 | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-material-dark-input-accent | #81ccc4 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-material-dark-input-error | #de3226 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Underline examples
Box examples
Outline examples
Mobiscroll theme
The following variables are specific to the Mobiscroll theme light variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-mobiscroll-input-text | #454545 | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-mobiscroll-input-border | #787878 | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-mobiscroll-input-accent | #4eccc4 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-mobiscroll-input-error | #de3226 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Mobiscroll Dark theme
The following variables are specific to the Mobiscroll theme dark variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-mobiscroll-dark-input-text | #f7f7f7 | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-mobiscroll-dark-input-border | #ffffff | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-mobiscroll-dark-input-accent | #4fccc4 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
| $mbsc-mobiscroll-dark-input-error | #de3226 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Underline examples
Box examples
Outline examples
If you are looking for the generic Form variables, check out the tables here.