Dropdown

These are basic selects without javascript but with js enabled they mask the select box whilst still keeping it clickable.

Multiple select inputs default to equal widths, but can be styled individually using .multi-select-index

one
Dropdown
= ui_component('forms/dropdown', properties: {as_below} ) 
{
  id: "input_id",
  name: "text_name",
  label: "Select label",
  options: [
    {
      title: "one"
    },
    {
      title: "two"
    },
    {
      title: "three"
    }
  ],
  data: {
    key: "value",
    super: "man"
  }
}
three
Select field
= ui_component('forms/select_field', properties: {as_below} ) 
{
  label: "Select label",
  id: "select_id",
  fields: [
    {
      name: "select_name",
      placeholder: "Select Item",
      selected: "three",
      class: "select_class",
      options: [
        {
          title: "one"
        },
        {
          title: "two"
        },
        {
          title: "three",
          value: 3
        }
      ]
    }
  ]
}
Item One
Item Two
Item Three
Select field
= ui_component('forms/select_field', properties: {as_below} ) 
{
  label: "Multiple Select label",
  id: "multiple_select_id",
  fields: [
    {
      name: "select_name",
      class: "select_class",
      placeholder: "Item One",
      options: [
        {
          title: "one"
        },
        {
          title: "two"
        },
        {
          title: "three"
        }
      ]
    },
    {
      name: "select_name",
      class: "select_class",
      placeholder: "Item Two",
      options: [
        {
          title: "a"
        },
        {
          title: "b"
        },
        {
          title: "c"
        },
        {
          title: "d"
        }
      ]
    },
    {
      name: "select_name",
      class: "select_class",
      placeholder: "Item Three",
      options: [
        {
          title: "a1"
        },
        {
          title: "b2"
        },
        {
          title: "c3"
        }
      ]
    }
  ]
}
Select multiple field
= ui_component('forms/select_multiple_field', properties: {as_below} ) 
{
  id: "input_id",
  name: "text_name",
  label: "Select label",
  options: [
    {
      title: "one"
    },
    {
      title: "two"
    },
    {
      title: "three"
    },
    {
      title: "four"
    },
    {
      title: "five"
    },
    {
      title: "six"
    },
    {
      title: "seven"
    },
    {
      title: "eight"
    },
    {
      title: "nine"
    },
    {
      title: "ten"
    }
  ],
  data: {
    key: "value",
    super: "man"
  }
}