SLDS Picklist Basics

Question

I wanted to create a picklist for my form using SLDS. There's probably no difference between SLDS select and SLDS picklist but I wanted to use picklist this time. I found the example here: https://www.lightningdesignsystem.com/components/picklist/ but for a picklist with 3 options, should the code be that long? I'm new to salesforce. Can someone give a very basic code for SLDS picklist that I can play around with? Some tutorials where I can select more than 1 option.

By the way, select has 2 triangle pointing up and down on its rightmost part while picklist has 1 triangle pointing down.

Answer 1

Answer for both question and comment on @glis answer:

As other explained: SLDS is used only for styling. There are already ready to use components that are styled with SLDS and you only need to add markup and eventually some logic.

Currently you have (or at least I found only those) 3 ready to use options:

lightning:select

Component:

<aura:component>
    <lightning:select aura:id="select" name="select" label="Select a pie" onchange="{! c.onChange }">
        <option value="">choose one...</option>
        <option value="apple">apple</option>
        <option value="pumpkin">pumpkin</option>
        <option value="cherry">cherry</option>
        <option value="blueberry">blueberry</option>
        <option value="pickle">pickle</option>
    </lightning:select>
</aura:component>

Controller:

({
    onChange: function (cmp, evt, helper) {
        alert(cmp.find('select').get('v.value') + ' pie is good.');
    }
})

lightning:combobox (which SHOULD have already ready to use multiselect functionality and I don't have a clue why SFDC released that component without implementing such functionality).

Component:

<aura:component>
    <aura:attribute name="options" type="List" default="[
    {'label': 'New', 'value': 'new'},
    {'label': 'In Progress', 'value': 'inProgress'},
    {'label': 'Finished', 'value': 'finished'},
    ]"/>

    <lightning:combobox name="progress" label="Status" value="inProgress" placeholder="Select Progress" options="{! v.options }" onchange="{! c.handleChange }"/>

</aura:component>

Controller:

({
    handleChange: function (cmp, event) {
        // This will contain the string of the "value" attribute of the selected option
        var selectedOptionValue = event.getParam("value");
        alert("Option selected with value: '" + selectedOptionValue + "'");
    }
})

lightning:dualListbox (with this you can fulfill requirement of multiselecting options)

Component:

<aura:component>
    <aura:attribute name="options" type="List" default="[
        { label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' },
        { label: 'Italian', value: 'it' },
        { label: 'Japanese', value: 'ja' }]"/>

    <lightning:dualListbox name="languages"  
                           label= "Select Languages" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           fieldLevelHelp="This is a dual listbox" 
                           options="{!v.options}" 
                           onchange="{! c.handleChange }"/>

</aura:component>

Controller:

({
    handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
        var selectedOptionValue = event.getParam("value");
        alert("Option selected with value: '" + selectedOptionValue.toString() + "'");
    }
})

Finally I found this blogpost which shows how to create multiselect picklist. But if you're only starting with lightning components I would recommend to use something that already ready to use and do not need any maintenance.

Also I would recommend Lightning Component Library from which I took those examples. Using this documentation you can learn a lot. It have list of all ready to use component with documentation and examples.

And last but not least as in previous answer you can use ui:inputSelect with multiple="true" parameter which will allow you to use multiselect picklist but it's not styled as you want.

Answer 2

Other than the SLDS Blueprints (which is actually a good place to start or get code of components with slds styling) there is also the lightning component reference guide which has code snippets, here is the lightning:Select which in its most basic form, looks something like this:

<aura:component>
<lightning:select name="select1" label="How many tickets?" required="true">
    <option value="">choose one...</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</lightning:select>
</aura:component>

note that components in the lightning namespace lightning:* automatically apply SLDS styling to the component it renders.

if you need multiple selection functionality, the SLDS blueprints have all the necessary explanation for achieving the functionality:

Multiple selections

Answer 3

You can use lightning:select or ui:inputSelect tags. SLDS is just styling and HTML. Use the Lightning framework tags where you can.

Component:

<aura:attribute name="contactLevel" type="String[]" default="Primary Contact, Secondary Contact, Other"/>
<ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onSelectChange}">
    <aura:iteration items="{!v.contactLevel}" var="level">
         <ui:inputSelectOption text="{!level}" label="{!level}"/>
    </aura:iteration>
</ui:inputSelect>

Controller:

onSelectChange : function(component, event, helper) {
    var selected = component.find("levels").get("v.value");
    //do something else
}

The code sample is from https://developer.salesforce.com/docs/component-library/bundle/ui:inputSelect/documentation. It's a good place to find samples and documentation for the aura framework.

For multiple selection you can use

<ui:inputSelect multiple="true">

The ui tags in my example don't have the Lightning styling, but the equivilent lightning tags do.