ColorPicker
The ColorPicker control allows you to select an optional color from the сolor board and get its HEX color code value. You can specify the selected color and supply the control's input with a placeholder, a tooltip or a label.
Related resources
- Get the widget by installing the
@wx/svelte-core
package. - Check ColorPicker API Reference to see the list of configuration properties.
- Explore the samples to visualize the available features.
Initialization
To add a ColorPicker instance into your application, you need to complete two steps:
- import the source file of the control on a page:
<script>
import { ColorPicker } from "@wx/svelte-core";
</script>
- apply the
<ColorPicker>
tag to initialize a color picker:
<ColorPicker />
A default color picker is initialized without any color selected.
Setting the value
The value of ColorPicker 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.
<ColorPicker value="#00a037" />
Related sample: ColorPicker
Getting the current value
You can get the current value of the ColorPicker control. For this, you need to:
- declare a variable that will contain the control's value (it may contain the initial value):
<script>
import { ColorPicker } from "@wx/svelte-core";
let color;
</script>
- bind the variable to the
value
property of the control:
<ColorPicker bind:value={color} />
If the name of the variable matches its value, you can use the shorthand while binding the property:
<script>
import { ColorPicker } from "@wx/svelte-core";
let value;
</script>
<ColorPicker bind:value />
After that the value assigned to the bound variable will be updated on each change of the color.
Related sample: ColorPicker
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 colorpicker:
<ColorPicker
bind:value={color}
{id}
title="Colors can be reconfigured" />
Related sample: ColorPicker
Adding a placeholder for the input
You can add a placeholder inside a color picker'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:
<ColorPicker placeholder="Select a color"/>
For a placeholder to be visible in the input, a color picker should be initialized without the initial value specified.
Related sample: ColorPicker
Setting the disabled state
Whenever you need to render a disabled color picker, you can do it with the help of the disabled
property set to true.
<ColorPicker disabled={true}/>
It is also possible to set the disabled state for a color picker by declaring the property with no value:
<ColorPicker disabled /> <!-- equals to "disabled={true}" -->
Related sample: ColorPicker
Adding a label
A default color picker 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 picker
- specify the id variable to bind the field and color picker controls
<script>
import { ColorPicker, Field } from "@wx/svelte-core";
</script>
<Field label="Select a color" position="left" let:id/>
After that, wrap the color picker in question into the <Field>
tags and specify the id
property for the color picker:
<Field label="Select a color" position="left" let:id>
<ColorPicker {id} />
</Field>
Related sample: ColorPicker
Styling a color validation error
When you use a color picker 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):
<ColorPicker error={true}/> <!-- equals to <ColorPicker 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 { ColorPicker, Field } from "@wx/svelte-core";
</script>
<Field label="Error" error let:id>
<ColorPicker error {id} />
</Field>
Related sample: ColorPicker