# Color Picker Examples and Reference

### Default Color Picker

An example of a default Color Picker without any extra properties.

    library(dash)
    library(dashDaq)
    library(dashHtmlComponents)

    app <- Dash$new()

    app$layout(htmlDiv(list(
      daqColorPicker(id = 'my-color-picker',
                     label = 'Color Picker',
                     value = '#119DFF'),
      htmlDiv(id = 'color-picker-output')
    )))

    app$callback(
      output(id = 'color-picker-output', property = 'children'),
      params = list(input(id = 'my-color-picker', property = 'value')),

      update_output <- function(value) {
        return (sprintf('The selected color is %s.', value))
      }
    )

    app$run_server()

Color Picker
hex
The selected color is {'hex': '#119DFF'}.

### Size

Set the size (width) of the color picker in pixels using the `size` property.

    library(dashDaq)

    daqColorPicker(
      label = 'Small',
      size = 164)

Small
hex

### Label

Define the label and label position using the `label` and `labelPosition` properties.

    library(dashDaq)

    daqColorPicker(
      label = "Label",
      labelPosition = "bottom"
    )

hex
Label

### Disabled

To disable the Color Picker set `disabled` to `TRUE`.

    library(dashDaq)

    daqColorPicker(
      label = "Color Picker",
      disabled = TRUE
    )

Color Picker
hex

### Hex Colors

Use hex values with the Color Picker by setting `value=list(hex='#<hex_color>')`

    library(dashDaq)

    daqColorPicker(
      label = "Color Picker",
      value = list(hex = "#0000FF")
    )

Color Picker
hex

### RGB Colors

Use RGB color values with the Color Picker by setting: `value = list(rgb = list(r = <r_value>, g = <g_value>, b = <b_value>, a = <a_value>))`

    library(dashDaq)

    daqColorPicker(
      label = "Color Picker",
      value = list(rgb = list(r = 255, g = 0, b = 0, a = 0))
    )

Color Picker
r
g
b
a

## ColorPicker Properties

> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.

`id` (character; optional): The ID used to identify the color picker in Dash callbacks.

`value` (named list; optional): Color value of the picker.

`value` is a named list with keys:

- `hex` (character; optional): Hex string.

- `rbg` (named list; optional): RGB/RGBA object.

  `rbg` is a named list with keys:

  - `a` (numeric; optional)

  - `b` (numeric; optional)

  - `g` (numeric; optional)

  - `r` (numeric; optional)

`disabled` (logical; optional): If TRUE, color cannot be picked.

`size` (numeric; default `225`): Size (width) of the component in pixels.

`theme` (named list; default `light`): Theme configuration to be set by a ThemeProvider.

`label` (named list; optional): Description to be displayed alongside the control. To control styling, pass an object with label and style properties.

`label` is a character | named list with keys:

- `label` (character; optional)

- `style` (named list; optional)

`labelPosition` (a value equal to: 'top' or 'bottom'; default `'top'`): Where the indicator label is positioned.

`className` (character; optional): Class to apply to the root component element.

`style` (named list; optional): Style to apply to the root component element.

`persistence` (logical | character | numeric; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`.

`persisted_props` (unnamed list of values equal to: 'value'; default `['value']`): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored.

`persistence_type` (a value equal to: 'local', 'session' or 'memory'; default `'local'`): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.