DAHLIA Pattern Library

Button Dropdown Multiselect 

<button class="button dropdown-button has-icon--right tiny tertiary " href="#" aria-expanded="false">
  <span class="ui-icon ui-small" aria-hidden="true">
    <svg>
      <use xlink:href="#i-arrow-down"></use>
    </svg>
  </span>
  Button
</button>
<ul class="dropdown-menu" role="listbox" aria-hidden="true" aria-multiselectable="true" aria-activedescendant tabindex="-1">
    <li class="dropdown-menu_item" role="option" aria-selected="false">
        <div class="checkbox">
            <input id="peach" type="checkbox" name="peach" tab-index="1" />
            <label for="peach">Checkbox 1</label>
            <input id="peach" type="checkbox" name="peach" tab-index="2" />
            <label for="peach">Checkbox 2</label>
        </div>
    </li>
    <li class="dropdown-menu_item" role="option" aria-selected="false">
        <div class="checkbox">
            <input id="apple" type="checkbox" name="apple" tab-index="1" />
            <label for="apple">Checkbox 1</label>
            <input id="apple" type="checkbox" name="apple" tab-index="2" />
            <label for="apple">Checkbox 2</label>
        </div>
    </li>
    <li role="separator" class="dropdown-menu_divider"></li>
    <li class="dropdown-menu_item is-selected" role="option" aria-selected="true">
        <div class="checkbox">
            <input id="cherry" type="checkbox" name="cherry" tab-index="1" />
            <label for="cherry">Checkbox 1</label>
            <input id="cherry" type="checkbox" name="cherry" tab-index="2" />
            <label for="cherry">Checkbox 2</label>
        </div>
    </li>
</ul>
 
<button class="button dropdown-button has-icon--right tiny tertiary {{default classes ''}}" href="#" aria-expanded="false">
  <span class="ui-icon ui-{{default scale 'small'}}" aria-hidden="true">
    <svg>
      <use xlink:href="#i-{{default icon 'arrow-down'}}"></use>
    </svg>
  </span>
  {{default text 'Button'}}
</button>
<ul class="dropdown-menu" role="listbox" aria-hidden="true" aria-multiselectable="true" aria-activedescendant tabindex="-1">
  <li class="dropdown-menu_item" role="option" aria-selected="false">{{> @checkbox name="peach"}}</li>
  <li class="dropdown-menu_item" role="option" aria-selected="false">{{> @checkbox name="apple"}}</li>
  <li role="separator" class="dropdown-menu_divider"></li>
  <li class="dropdown-menu_item is-selected" role="option" aria-selected="true">{{> @checkbox name="cherry"}}</li>
</ul>
 
{
  "modifiers": [
    "normal",
    "primary",
    "secondary",
    "tertiary",
    "alert",
    "alert-fill",
    "tint",
    "deep",
    "tiny is-leased",
    "tiny is-waitlisted",
    "tiny is-processing",
    "tiny is-approved",
    "tiny is-withdrawn",
    "tiny is-disqualified",
    "tiny is-appealed",
    "ghost-white",
    "large",
    "tall",
    "small",
    "tiny",
    "expand",
    "disabled",
    "button-link"
  ],
  "icons": [
    "arrow-down",
    "download",
    "forward",
    "info",
    "like"
  ]
}

There are no notes for this item.