> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-components/form-controls/color-picker/code.md).

# Code

## Props

<table><thead><tr><th width="150">Props</th><th>Data Type</th><th>Required</th></tr></thead><tbody><tr><td>className</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>id</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td>name</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>label</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>info</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>defaultColor</td><td>string (hexadecimal code)</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>alpha</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>helptext</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>disabled</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>onChange</td><td>function</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>onCopy</td><td>function </td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

### onChange Event Response

| Property | Data Type                                                                                                                                                                                                                                                                                    |
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id       | string                                                                                                                                                                                                                                                                                       |
| name     | string                                                                                                                                                                                                                                                                                       |
| label    | string                                                                                                                                                                                                                                                                                       |
| value    | <p>{</p><p>   hex: string,</p><p>   hsla/hsl: {</p><p>      h: string,</p><p>      s: string,</p><p>      l: string,</p><p>      a: string</p><p>  },</p><p>  rgba/rgb: {</p><p>      r: string,</p><p>      g: string,</p><p>      b: string,</p><p>      a: string  </p><p>  }</p><p>}</p> |

### onCopy Event Response

onCopy action is going to copy to the user's clipboard the selected color in hexadecimal code at the same time it is going to return it as a string in the case the developer wants to use the value at the moment.

### Example

```tsx
import React, {useState} from 'react';
import {ColorPicker} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [color, setColor] = useState('#000000');
    
    const updateState = (e)=>{
        setColor(e.value.hex);
    }
    
    const showColorInConsole = (e)=>{
        //The hexadecimal code is also copied to the user's clipboard
        console.log(e);
    }
    
    return(
        <div className='container'>
            <ColorPicker 
                id='example' 
                defaultColor={color} 
                alpha 
                onChange={updateState}
                onCopy={showColorInConsole}
            />
        </div>
    )
}
```

## Components Dependency

For this component elaboration there were used the following internal components:

* [Label](/sds/sds-components/form-controls/label.md)
* [Button](/sds/sds-components/simple-components/button.md)

## Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

### React

{% embed url="<https://sipster-react-component-storybook.netlify.app/?path=%2Fstory%2Fform-controls-color-picker--base-color-picker>" %}