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
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"
}
}
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
}
]
}
]
}
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"
}
}