ColorSelect

The ColorSelect control provides a handy way of selecting colors from a predefined palette. You can set the selected color, apply your own palette by redefining the default one, add a placeholder, a tooltip or the Clear icon into the control's input and render a disabled color select.

Related resources

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

Initialization

To add a ColorSelect instance into your application, you need to complete two steps:

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

App.svelte

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

• apply the <ColorSelect> tag to initialize a color select:

App.svelte

<ColorSelect />

A default color select is initialized without any color selected.

Setting the value

The value of ColorSelect is the Hexadecimal code of a color selected in the control. It is displayed in the input of the control, when selection is done. You can specify the selected color as a string via the value property.

<ColorSelect value="#00a037" />

Related sample: ColorSelect

Getting the current value

You can get the current value of the ColorSelect control. For this, you need to:

• declare a variable that will contain the control's value (it may contain the initial value):

<script>
    import { ColorSelect } from "wx-svelte-core";

    let color;
</script>

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

<ColorSelect bind:value={color} />

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

<script>
    import { ColorSelect } from "wx-svelte-core";

    let value;
</script>

<ColorSelect bind:value />

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

Related sample: ColorSelect

Using custom colors

The ColorSelect control is supplied with a predefined set of colors. These colors are visible in the palette which opens when you click in the input. The list of default colors is given below:

let colors = [
    "#00a037",
    "#df282f",
    "#fd772c",
    "#6d4bce",
    "#b26bd3",
    "#c87095",
    "#90564d",
    "#eb2f89",
    "#ea77c0",
    "#777676",
    "#a9a8a8",
    "#9bb402",
    "#e7a90b",
    "#0bbed7",
    "#038cd9"
];

This list can be modified via the colors API property. You simply add your own color codes as strings into the colors array:

<ColorSelect colors={['#65D3B3', '#FFC975', '#58C3FE']} />

and get a custom palette in a color select:

Related sample: ColorSelect

Adding the Clear button

The Clear button allows clearing the selected option from the input.

To add the Clear button into the input, use the clear property:

<ColorSelect clear />

Related sample: ColorSelect

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 ColorSelect:

<ColorSelect
    bind:value={color}
    {id}
    title="Colors can be reconfigured" />

Related sample: ColorSelect

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 change event. Inside the event you can get the value of the newly selected option in the following way:

<script>
    function handleChange({value}){
        console.log(value); 
        // HEX code
    }
</script>

<ColorSelect onchange={handleChange}/>  

The handler function of the change event takes an object with the HEX code of the newly selected color.

Adding a placeholder for the input

You can add a placeholder inside a color select'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:

<ColorSelect placeholder="Select a color"/>

note

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

Related sample: ColorSelect

Setting the disabled state

Whenever you need to render a disabled color select, you can do it with the help of the disabled property set to true.

<ColorSelect disabled={true}/>

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

<ColorSelect disabled /> 

Related sample: ColorSelect

Adding a label

A default color select 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 complete 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 color select
  • specify the id variable to bind the field and color select controls

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

<Field label="Select a color" position="left">{#snippet children(id)}{/snippet}</Field>

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

<Field label="Select a color" position="left">
    {#snippet children(id)} 
    <ColorSelect {id} /> 
    {/snippet}
</Field>

Related sample: ColorSelect

Styling a color validation error

When you use a color select inside a form and a wrong color 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):

<ColorSelect error={true}/> 

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

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

<Field label="Error" error>
    {#snippet children(id)}
    <ColorSelect error {id} /> 
    {/snippet}
</Field>

Related sample: ColorSelect