Combo

The Combo control presents a combination of a text input field and a drop-down list of options that appears on click in the input. The input field is editable and combo options are filtered according to the entered text. You can set the value, provide a desired data set of options, specify a field that will present the option's text, add a placeholder for the input field.

Related resources

• Get the widget by installing the @wx/svelte-core package.
• Check Combo API Reference to see the list of configuration properties and events.
• Explore the samples to visualize the available features.

Initialization

To create a Combo instance on a page, you need to complete several steps:

• import the source file of the control on a page:

App.svelte

<script>
    import { Combo } from "@wx/svelte-core";
</script>

• apply the <Combo> tag to initialize a combo:

App.svelte

<Combo />

• load a data set with options into the combo:

App.svelte

<Combo {options}/>

Loading options

Options can be loaded into Combo on its initialization or after it. To begin with, you need to define a data set.

Preparing a data set

A data set will contain Combo options. You need to specify them as objects with properties presented as key:value pairs. Below you can see an example data set which contains a list of users:

const users = [
    {
        id: 87,
        name: "Berni Mayou",
        email: "bern.mayour@mail.com",
        avatar: "berni.jpg",
    },
    {
        id: 97,
        name: "August Dvorak",
        email: "dvor.august@gmail.com",
        avatar: "august.jpg",
    },
    {
        id: 98,
        name: "Elly Soyer",
        email: "elly.soyer@example",
        avatar: "elly.jpg",
    }
]

Loading options on initialization

To load a prepared data set on initialization of Combo, you should use the options property:

<script>
    const users = [
        {
            id: 87,
            name: "Berni Mayou",
            email: "bern.mayour@mail.com",
            avatar: "berni.jpg",
        },
        // more options
    ]
</script>

<Combo options={users} />

Loading options after initialization

You can load options into Combo after its initialization from a separate JS file. First, prepare a file with data, name it "userlist" and export the desired data set:

userlist.js

export const users = [
    {
        id: 87,
        name: "Berni Mayou"
    },
    {
        id: 97,
        name: "August Dvorak"
    },
    {
        id: 98,
        name: "Elly Soyer"
    }
]

Then import the data set into your application and set its name as a value of the options property:

App.svelte

<script>
    import { Combo } from "@wx/svelte-core";
    import { users } from "../your_data/userlist";
</script>

<Combo options={users} />

Related sample: Combo

Setting the value

You can specify which one of the provided combo options should be rendered in the input field of the control. Use the value property to set the id of the selected value:

<script>
    const dataset = [
        {id:1, name:"First option"},
        {id:2, name:"Second option"},
        {id:3, name:"Third option"}
    ]
</script>

<Combo options={dataset} value={1} />

If the value isn't set, the input field will be rendered empty. When you click it to open the drop-down list, the text cursor starts blinking inside it:

Related sample: Combo

Getting the current value

You can get the value of the option selected at the moment. For this, you need to:

• specify a variable that will contain the Combo value (it may contain the initial value):

<script>
    import { Combo } from "@wx/svelte-core";

    const dataset = [
        {id:1, name:"First option"},
        {id:2, name:"Second option"},
        {id:3, name:"Third option"}
    ]

    let selected = 2;
</script>

• bind the variable to the value property of the control:

<Combo options={dataset} bind:value={selected}/>

If the name of the variable matches its value, you can use the shorthand while binding the property:

<script>
    import { Combo } from "@wx/svelte-core";

    const dataset = [
        {id:1, name:"First option"},
        {id:2, name:"Second option"},
        {id:3, name:"Third option"}
    ]

    let value = 2;
</script>

<Combo options={dataset} bind:value/>

After that the value assigned to the bound variable will be updated on each change of the selected option.

Catching the change of the selected option

In case you need to catch the change of the selected option, you can do it by handling the select event. Inside the event you can get the newly selected option in the following way:

<script>
  function handleSelect(ev) {
    const newSelection = ev.detail;
    console.log(newSelection); 
    //=>{selected:{id:97, name:'August Dvorak', email:'dvor.august@gmail.com', avatar:'august.jpg'}}
  }
</script>

<Combo value={1} on:select={handleSelect}/>

The handler function of the select event takes the CustomEvent object as a parameter and returns an object of the newly selected option.

Configuring the text of the selected option

You can specify the text of which field to show in the input for a selected Combo option. For this, you can use the textField property. As a value of this property you need to set the key of the field, the text of which you want to display in the input when the option is selected.

<script>
    const users = [
        {       
            id:1,
            name: "Berni Mayou",
            email: "bern.mayour@mail.com",
        },
        {
            id:2,
            name: "August Dvorak",
            email: "dvor.august@gmail.com",
        },
        {
            id:3,
            name: "Elly Soyer",
            email: "elly.soyer@example",
        }
    ]
</script>

<Combo options={users} textField="email" let:option>
    {option.name}
</Combo>

In the above example the list of options displays the values of the "name" attributes. The textField property defines that the value of the "email" attribute is shown in the input on selection of an option from the list.

Related sample: Combo

Customizing the content of options

Usually, a combo option shows the content of just one of its fields. You can redefine the default template to display the content of several data fields for an option. A custom template presents a component that should be nested into Combo.

Setting a custom template

To make a template, let's create a separate file and name it "CustomOptionTemplate":

CustomOptionTemplate.svelte

<script>
    export let data;
</script>

<div class="item">
    <div class="name">{data.name}</div>
    <div class="mail">{data.email || ''}</div>
</div>

The <CustomOptionTemplate> component contains a template that describes what fields will be shown in Combo options. In the above example the "name" and "email" (if it is provided for a user) fields are set in the data template.

Applying the template

Now let's apply the created template for the Combo options. For this:

• import the CustomOptionTemplate component on a page after importing Combo
• declare the "option" variable in the <Combo> tag and set it as a value of the data property of the nested <CustomOptionTemplate> component:

App.svelte

<script>
    import { Combo } from "@wx/svelte-core";
    import CustomOptionTemplate from "../your_components/CustomOptionTemplate.svelte";
</script>

<Combo options={users} textField="name" let:option>
    <CustomOptionTemplate data={option} />
</Combo> 

Thus the <CustomOptionTemplate> component will get the option's object with fields and apply the template to them.

tip

Note that the content of the selected option is defined by the textField property.

Related sample: Combo

Adding a title

A title is a tooltip text that appears on hovering the mouse cursor over the input and may contain some extra information about the control. Use the title property to add a tooltip for a combo:

<Combo
    options={users}
    textField="name"
    error
    let:option
    value={104}
    title="Incorrect option">
    {option.name}
</Combo>

Related sample: Combo

Adding a placeholder for the input

You can add a placeholder inside the combo's input. The placeholder can contain some prompting message to make interaction with the control simpler. All you need is to set your message as a value of the placeholder property:

<Combo placeholder="Select an option"/>

note

For a placeholder to be visible in the input, a combo should be initialized without the initial value specified.

Related sample: Combo

Setting the disabled state

Whenever you need to render a disabled combo, you can do it with the help of the disabled property.

<Combo disabled={true}/>

It is also possible to set the disabled state for a combo by declaring the property with no value:

<Combo disabled /> <!-- equals to "disabled={true}" -->

Related sample: Combo

Adding a label

A default combo has no label. To add it, you can use the Field component and complete several steps:

• include the Field source file on a page, declare the <Field> tag and fill it with the necessary props:
  • add a desired label via the label property
  • set the position="left" property, if you want to place the label to the left of the combo
  • specify the id variable to bind the field and combo controls

<script>
    import { Combo, Field } from "@wx/svelte-core";
</script>

<Field label="Owner" position="left" let:id/>

After that, wrap the combo in question in the <Field> tags and specify the id property for the combo:

<Field label="Owner" position="left" let:id>
    <Combo {id} />
</Field>

Related sample: Combo

Styling an option validation error

When you use a combo inside a form and a wrong option value is passed to the control, you can use error styling to show that validation has failed. Once you've set the error property to true (or just specified the property without a value):

<Combo error={true}/> <!--equals to <Combo error/> -->

the input's border and the option's text become red. To make the label red as well, use the error property of the Field control:

<script>
    import { Combo, Field } from "@wx/svelte-core";
</script>

<Field label="Error" error let:id>
    <Combo error={true} {id}/>
</Field>

Related sample: Combo