Skip to main content

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.

ColorSelect

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:

ColorSelect custom palette

Related sample: ColorSelect

Manipulating the Clear icon​

A default color select goes with the Clear (cross) icon that allows removing the selected color value from the control's input.

ColorSelect Clear icon

If you need a color select without this icon in the input, you can switch it off it by setting the clear property to false:

<ColorSelect clear={false}/>

ColorSelect no Clear icon

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" />

ColorSelect title

Related sample: ColorSelect

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"/>

ColorSelect input placeholder

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}/>

Disabled color select

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

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

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" let:id/>

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" let:id>
    <ColorSelect {id} />
</Field>

ColorSelect

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}/> <!-- equals to <ColorSelect error/> -->

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 let:id>
    <ColorSelect error {id} /> 
</Field>

Error styling

Related sample: ColorSelect