# ColorSelector

Select a color defined in site settings.\
This component wraps [DropdownSelector](/packages/config-svelte/components/base/dropdownselector) with `component="color"`.

## Example

```svelte
<script>
  import { ColorSelector } from '@soleil-se/config-svelte';
</script>


<ColorSelector name="color" label="Color" />
```

## Props

The following props are inherited from the `DropdownSelector` component.

| Prop             | Type                                                                                        | Description                                                           |
| ---------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `label`required  | `string \| Snippet`                                                                         | Field label, a string or Svelte snippet.                              |
| `value`$bindable | `string`                                                                                    | Selected node ID.                                                     |
| `name`           | `string`                                                                                    | Configuration key and HTML name attribute.                            |
| `description`    | `string \| Snippet`                                                                         | Description shown below the field, a string or Svelte snippet.        |
| `required`       | `boolean`                                                                                   | Set the field as required.**Default:** `false`                        |
| `disabled`       | `boolean`                                                                                   | Disables the field.**Default:** `false`                               |
| `show`           | `boolean`                                                                                   | Shows or hides the selector without destroying it.**Default:** `true` |
| `class`          | `string`                                                                                    | CSS class added to the form-group wrapper.                            |
| `children`       | `Snippet`                                                                                   | Content rendered after the selector and validation message.           |
| `onChange`       | `function`Mer information```ts
(value: string, event: Event) => void
```                    | Called on a selection change.                                         |
| `validate`       | `function`Mer information```ts
(context: ValidationContext<string>) => ValidationResult
``` | Custom validator.                                                     |

## Validation

By default, the component applies standard required-field validation. A custom `validate` prop replaces that default and returns `{ success: boolean, message?: string }`.\
Validation errors are displayed below the component and prevent saving.

See [validation](/packages/config-svelte/#validation) for more details.

## Snippets

`label` and `description` accept text or Svelte snippets.\
Default child content is rendered after the color selector and validation message.

**App.svelte**

```svelte
<script>
  import { ColorSelector } from '@soleil-se/config-svelte';
</script>


<ColorSelector name="color">
  {#snippet label()}
    Välj <strong>färg</strong>
  {/snippet}
  {#snippet description()}
    Innehåll som används i <strong>appen</strong>.
  {/snippet}
  <p>Ytterligare information.</p>
</ColorSelector>
```