# SubComponents

## Control

The control subcomponent is required to render the `Control` of the ColorPicker component. Because of this, this component extends the native div props.  Because of this, you can use all of the native props. This is a required children.

### Control API

{% hint style="danger" %}
Notice that there is a difference between using `isDisabled` here or in the parent component. It is not recommended to change this props in the `Control` subcomponent, because this props can be inherited from the `Wrapper`. If you use it in the `Control` subcomponent, you will get the state only in the field. 
{% endhint %}

| Props                | Type                                            | Required |
| -------------------- | ----------------------------------------------- | -------- |
| `hex`                | string                                          | :x:      |
| `rgb`                | `{ r:number, g: number, b: number, a?: number}` | :x:      |
| `hsl`                | `{h: number, s: number, l: number, a?: number}` | :x:      |
| `defaultHex`         | `string`                                        | :x:      |
| `defaultRgb`         | `{ r:number, g: number, b: number, a?: number}` | :x:      |
| `defaultHsl`         | `{h: number, s: number, l: number, a?: number}` | :x:      |
| `defaultColorFormat` | `'rgb' \| 'hsl' \| 'hex';`                      | :x:      |
| `onColorChange`      | `(e: ColorPickerChangeEventProps ) => void;`    | :x:      |

<details>

<summary>hex, rgb, hsl</summary>

These props are used for the controlled approach of the component. Developers are able to to use only one format to work with: hex, rgb or hsl. If developers attempt to use more than one format to share to the color picker the value it should have, it will trigger an error.

</details>

<details>

<summary>defaultHex, defaultRgb, defaultHsl</summary>

These props, just like the hex, rgb and hsl, help developers to share the value that should be displayed on the color picker, with the main difference these are for the uncontrolled approach, and will affect only the initial value. Once the user interacts with the color picker, it will internally manage the color value and share it back to developers through the `onColorChange` event.

Developers can only use one format at the time.

</details>

<details>

<summary>defaultColorFormat</summary>

Color Picker component has the ability to jump from hex, to rgb and to hsl formats, facilitating users the convertions of the colors and to work with their prefer color format.

This props manages the initial presentation of the color picker, by default, it show hexadecimal color code, but if the project requires to work more with rgb, for example, devs can set the initial presentation to be on rgb color format.

</details>

<details>

<summary>onColorChange</summary>

Custom event of the component where it is shared back to developers the selected color on the color picker after the user has interacted with it.

This event returns an object with the same color in three different formats: hex, rgb and hsl.

If developers are using typescript, they can use the type `ColorPickerChangeEventProps` for the event function.

</details>

### HelpText

The HelpText subcomponent extends the SDS label component. See for reference: [HelpText](/sds/sds-3.0/sds-components/components/helptext.md).

### Label

The Label subcomponent extends the SDS label component. See for reference: [Label](#label).

### Utilities

Interacting with colors can be complicated, more taking in consideration there are a lot of different tools to work with them. By default, the Color Picker component offers developers some utilities that can help them with the color convertions.

* **colorPickerRgbToString**: Transforms the rgb object the Color Picker returns into a string with the correct format.
* **colorPickerHslToString**: Transforms the hsl object the Color Picker returns into a string with the correct format.
* **colorPickerStringValidator**: Validates string colors. It can receive hex, rgb and hsl string values.
* **colorPickerStringToColor**: Transforms string colors into selected color format.

```typescript
const rgbWhiteColorString = colorPickerRgbToString({
    r: 255,
    g: 255,
    b: 255,
    a: 0.85
}) //Returns 'rgba(255, 255, 255, 0.85)'

const hslWhiteColorString = colorPickerRgbToString({
    h: 0,
    s: 0,
    l: 100,
    a: 0.85
}) //Returns 'hsla(0, 0, 100, 0.85)'

const validationTest1 = colorPickerStringValidator('#ffffff') // true
const validationTest2 = colorPickerStringValidator('hello') // false

const. rgbWhiteColorObject = colorPickerStringToColor('hsla(0, 0, 100, 0.85)', 'rgb')
// {r: 255, g: 255, b: 255, a: 0.85}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/colorpicker/code/subcomponents.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.