There is a newer version of Luda.

Let's go!

Form Dropdown

Create beautiful dropdowns for selecting options in forms.

#Introduction

The form dropdown component is based on the dropdown component, it’s an alternative to the form select field. When create a form dropdown, the .fm-dropdown class need be added to the dropdown container. Let’s see how to create single select form dropdowns and multiple select form dropdowns through the below examples.

#Single Select Form Dropdown

Wrap <input type="radio">s in the dropdown menu to simulate a single select field. Wrap a text field for showing the placeholder and the selected options.

<div class="fm-dropdown dropdown-fixed dropdown-absolute-m">
  <div class="fm fm-select" data-auto="false">
    <input placeholder="E.g., Item one">
  </div>
  <div class="dropdown-menu">
    <div class="dropdown-items">
      <div class="btns-y">
        <div class="btn-radio btn-hollow-primary">
          <input type="radio" id="example1-1" name="example1" value="1">
          <label for="example1-1">Item One</label>
        </div>
        <div class="btn-radio btn-hollow-primary">
          <input type="radio" id="example1-2" name="example1" value="2">
          <label for="example1-2">Item Two</label>
        </div>
      </div>
    </div>
  </div>
</div>

#Multiple Select Form Dropdown

Wrap <input type="checkbox">s in the dropdown menu to simulate a multiple select field. Wrap a text field for showing the placeholder and the selected options.

The data-dropdownable="false" attribute should be added to the .dropdown-menu to prevent the menu from being closed when menu items clicked.

<div class="fm-dropdown dropdown-fixed dropdown-absolute-m">
  <div class="fm fm-select" data-auto="false">
    <input placeholder="E.g., Item One, Item Two">
  </div>
  <div class="dropdown-menu">
    <div class="dropdown-items" data-dropdownable="false">
      <div class="btns-y">
        <div class="btn-check btn-hollow-primary">
          <input type="checkbox" id="example2-1" name="example2" value="1">
          <label for="example2-1">Item One</label>
        </div>
        <div class="btn-check btn-hollow-primary">
          <input type="checkbox" id="example2-2" name="example2" value="2">
          <label for="example2-2">Item Two</label>
        </div>
      </div>
    </div>
  </div>
</div>

#Customize Option Labels

The form dropdown component uses the inner texts of wrapped radio’s labels and checkboxes’ labels for display, except when the data-fm-dropdown-label attribute is setted on the radios or the checkboxes.

In the below example, we set the data-fm-dropdown-label attribute on the radios. When a radio is selected, the value of its data-fm-dropdown-label attribute will show in the wrapped text field.

<div class="fm-dropdown dropdown-fixed dropdown-absolute-m">
  <div class="fm fm-select" data-auto="false"><input></div>
  <div class="dropdown-menu">
    <div class="dropdown-items">
      <div class="btns-y">
        <div class="btn-radio btn-hollow-primary btn-ico-left">
          <input checked type="radio" id="example3-1" name="example3" value="1">
          <label data-fm-dropdown-label="You've selected item one." for="example3-1">Item One<i class="ico material-icons">face</i></label>
        </div>
        <div class="btn-radio btn-hollow-primary btn-ico-left">
          <input type="radio" id="example3-2" name="example3" value="2">
          <label data-fm-dropdown-label="You've selected item two." for="example3-2">Item Two<i class="ico material-icons">face</i></label>
        </div>
      </div>
    </div>
  </div>
</div>

#Listen Selected Changes

// @example Do something after selected options changed.
luda(document).on('luda:fmDropdown:changed', '#my-fm-dropdown', function(event, data){
  console.log(data.value) // Selected values in an array.
  console.log(data.selected) // Checked input elements in an array.
})