Invision UI v.19.6.0-0

Getting Started

  • Running Invision UI
  • UI Component Anatomy
  • Authoring SCSS
  • Authoring Presentational Behavior

Component Foundations

  • SCSS Authoring
    • Mixins & Variables
    • Stateful Classes
  • State Guidance
    • Empty/Zero State
    • Loading State
  • Utilities
    • Align
    • Display
    • Flexbox
    • Font Size
    • Layout
    • Offset
    • Position
    • Overflow
    • Size
    • Spacing
    • Text
  • Layout
    • Arrange [Deprectated]
    • Divided Columns
    • Embed Video
    • Full and Center
    • Fill [Deprectated]
    • Grid
    • Media Blocks
    • Panels
    • Vertical Layouts
  • Media Queries
  • Angular Behaviors
    • App Theme Directive
    • Auto Focus Input
    • Filters
    • Popup (modal dialog) Manager
    • Tether (tooltip/dropdown) Manager
    • Resize Sensor
    • Watchers

UI Component Library

  • Content & Containment
    • Active Translation
    • Auto Fit Text
    • Address
    • Basic & Input Table
    • Brand Logo/Slogan
    • Call to Action - Empty State
    • Carousel
    • Cart
    • Choice
    • Collapsible Container
    • Copyright Footer
    • Coupon Redeemer
    • Content
    • Date Relative Display
    • Definition Lists
    • Delimited List
    • Details
    • Expiration Date Display
    • Feature Toggle
    • Form Section Heading
    • Header
    • Heading
    • Heading With Annotation
    • Icons
    • Interaction Details
    • Labeled Balance
    • Link
    • Main Container
    • Metadata Card
    • Metadata List Item
    • Offering QuickView
    • Payment Instrument
    • Preference Dialog
    • Pricing Plan Decoration
    • Product Availability
    • Product Details
    • Product Image
    • Quick Info Panel
    • Remark
    • Renewal Column
    • Richlist Filterbar
    • Richlist Wrapper
    • Scrollable Horizontal List
    • Search Card
    • Search Panel
    • Section
    • Selectable Option
    • Smart Truncate
    • Status Grid
    • Tooltip
  • Data Visualizations
    • Bill Runs
    • Comparison Table
    • Datatable
    • Progress Tracker
    • Schedules
    • Query Builder
  • Dialogs
    • Confirmation Dialog
    • Dialog
    • Rich List Dialog
    • Wait Dialog
  • Forms and Filters
    • Additional Properties
    • Autocomplete
    • 3 Field Date Input
    • Checkbox
    • Credit Card
    • Bulk Action Bar
    • Buttons
    • Confirmation Button
    • Date Picker
    • E-Check
    • Entity Specification
    • External Bill
    • External Gift Card
    • Focus Group
    • Forms
    • Filter Bar
    • Filter Dropdowns
    • Gift Card
    • Grouped Check Filters
    • Inputs
    • Input Select Combo
    • Monetary Input
    • Multi Dropdown Selector
    • Multiple Numeric Input
    • Monetary Range Input
    • Password Unmask Button
    • Select
    • Select Button Or Stepper
    • Select Or Text Input
    • Stepper
    • Tag Dropdown
  • Navigation & Flow
    • Back Banner
    • Back Component
    • Breadcrumbs
    • Details Pager
    • Expandable Section
    • Infinite Scroll
    • Open New Window
    • Pager
    • Fancy Richlist
    • Standard Navigator
    • Status Indicator
    • Step Progress Bar
    • Step Progress Indicator
    • Tab Card
    • Tab Panel
    • Tier Navigator
    • Wizard
  • Notifications
    • Loading Indicator
    • Toast Notifications
  • Deprecated
    • Content Area

Showcase

  • General
    • Simplelist
    • Richlist
    • Primary (side) Navigator
  • Customer Care
    • Case Activity List
    • Customer Care Navigator Component
    • Dashboard
    • Decisions
  • Reporting
    • Content Visualization

Unit Testing

  • Actions
  • Components
  • Selectors
  • Reducers

End-to-end Testing

Statistics

Multi Dropdown Selector

In this section

Variants
  • Multi Dropdown Selector - Required
  • Multi Dropdown Selector - Optional
  • Linear Multiple Selector

Multi Dropdown Selector - Required

Displays an option for selecting an option based on multiple dropdowns. This example marks the field as required.

Form Validity: Valid Invalid
Model:

    
HTML
<div class="t-content" ng-controller="MultiDropdownSelectorExample as mdsExample">
    <form class="c-form c-generalForm" name="exampleForm" autocomplete="off" style="width: 40%">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item is-required">
                <label>Tax Exemption</label>
                <inv-multi-dropdown-selector
                    label="Tax Exemption"
                    additional-item-prompt="'Add an additional tax exemption'"
                    is-required="true"
                    first-dropdown-items="mdsExample.firstDropdownItems"
                    second-dropdown-items="mdsExample.secondDropdownItems"
                    ng-model="mdsExample.fieldModel">
                </inv-multi-dropdown-selector>
            </div>
        </fieldset>
        <div class="u-flex u-flexRow u-flexEnd">
            <button type="submit" ng-enabled="mdsExample.shouldEnableSubmit()" class="c-button c-button--primary ng-binding" tabindex="100">Submit</button>
        </div>

        <div class="u-flex u-flexRow" style="font-weight: 700;">
            <span style="margin-right: 8px">Form Validity:</span>
            <span style="color: green" ng-show="mdsExample.shouldShowValid()">Valid</span>
            <span style="color: red" ng-show="!mdsExample.shouldShowValid()">Invalid</span>
        </div>
        <span style="margin-right: 8px; font-weight: 700;">Model:</span>
        <pre ng-bind="mdsExample.fieldModel | json"></pre>
    </form>
</div>

Multi Dropdown Selector - Optional

Displays an option for selecting an option based on multiple dropdowns. This example marks the field as optional.

Form Validity: Valid Invalid
Model:

    
HTML
<div class="t-content" ng-controller="MultiDropdownSelectorExample as mdsExample">
    <form class="c-form c-generalForm" name="exampleForm" autocomplete="off" style="width: 40%">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item is-required">
                <label>Tax Exemption</label>
                <inv-multi-dropdown-selector
                    label="Tax Exemption"
                    additional-item-prompt="'Add an additional tax exemption'"
                    first-dropdown-items="mdsExample.firstDropdownItems"
                    second-dropdown-items="mdsExample.secondDropdownItems"
                    ng-model="mdsExample.fieldModel"
                >
                </inv-multi-dropdown-selector>
            </div>
        </fieldset>
        <div class="u-flex u-flexRow u-flexEnd">
            <button type="submit" ng-enabled="mdsExample.shouldEnableSubmit()" class="c-button c-button--primary ng-binding" tabindex="100">Submit</button>
        </div>

        <div class="u-flex u-flexRow" style="font-weight: 700;">
            <span style="margin-right: 8px">Form Validity:</span>
            <span style="color: green" ng-show="mdsExample.shouldShowValid()">Valid</span>
            <span style="color: red" ng-show="!mdsExample.shouldShowValid()">Invalid</span>
        </div>
        <span style="margin-right: 8px; font-weight: 700;">Model:</span>
        <pre ng-bind="mdsExample.fieldModel | json"></pre>
    </form>
</div>

Linear Multiple Selector

Displays options for selecting an item from a fancy single select based on the available options minus the selected options in other fancy selects in the group. Options are not cascaded and all dropdowns share the same list of options.

HTML
<div class="t-content" ng-controller="LinearMultipleSelectorExample as $ctrl">
    <inv-linear-multiple-selector
        label="$ctrl.label"
        descriptor="$ctrl.descriptor"
        available-options="$ctrl.availableOptions"
        selected-options="$ctrl.selectedOptions"
        limit="$ctrl.limit"
        on-selected-options-changed="$ctrl.onSelectedOptions_changed">
    </inv-linear-multiple-selector>
</div>