Color Picker

<tpg-color-picker></tpg-color-picker>

Color Picker elicits a multi-level list of drop-down choices that contains color value options. When the dropdown is empty, the Color Picker will be set to “disabled” with N/A as its content.

Note

Color Picker behaves differently than other list elements. Instead of using slots, it relies on the prop options, which should be an array of objects instead of html elements.

Examples

Basic Usage

The color picker supports the following colors.

By default, options is prefilled with all available colors.

The color picker is also searchable, and has keyboard navigation.

Component

Vanilla JS

  <tpg-color-picker
    placeholder="Placeholder"
    id="color-picker-1"
    label="Color picker"
  ></tpg-color-picker>

React

  <tpg-color-picker
    placeholder="Placeholder"
    id="color-picker-1"
    label="Color picker"
  ></tpg-color-picker>

Only Color

Use the only-color attribute on the Color Picker to change the rendering of the menu items.

Component

Vanilla JS

  <tpg-color-picker
    placeholder="Placeholder"
    label="This icon can be overridden"
    only-color
  ></tpg-color-picker>

React

  <tpg-color-picker
    placeholder="Placeholder"
    label="Color picker"
    onlyColor
  ></tpg-color-picker>

Custom options with section header

Use the only-color attribute on the Color Picker to change the rendering of the menu items.

Component

Vanilla JS

  <tpg-color-picker
    placeholder="Placeholder"
    label="This icon can be overridden"
  ></tpg-color-picker>
  <script>
    document.addEventListener('DOMContentLoaded', ()=>{
        const colorPickers = document.querySelectorAll('tpg-color-picker');
        for (const colorPicker of colorPickers) {
        colorPicker.options = [
          {color: 'colorToolsBlack', label: 'Black', 'value': 'black'},
          {color: 'colorToolsWhite', label: 'White', 'value': 'white'},
          {color: 'colorToolsYellow', label: 'Yellow', 'value': 'yellow', sectionHeader: 'Overlay'},
          {color: 'colorToolsOrange', label: 'Orange', 'value': 'orange'},
          {color: 'colorToolsRed', label: 'Red', 'value': 'red'}
        ];
      });
  </script>

React

  <tpg-color-picker
    placeholder="Placeholder"
    label="Color picker"
    options={[
      {color: 'colorToolsBlack', label: 'Black', 'value': 'black'},
      {color: 'colorToolsWhite', label: 'White', 'value': 'white'},
      {color: 'colorToolsYellow', label: 'Yellow', 'value': 'yellow', sectionHeader: 'Overlay'},
      {color: 'colorToolsOrange', label: 'Orange', 'value': 'orange'},
      {color: 'colorToolsRed', label: 'Red', 'value': 'red'}
    ]}
  ></tpg-color-picker>

Default value

Use the selected-value attribute on the Color Picker to set a default selected value. The value has to correspond with the value of a Menu Item.

Component

Vanilla JS

  <tpg-color-picker
    placeholder="Placeholder"
    selected-value="colorToolsOrange"
    label="This icon can be overridden"
  ></tpg-color-picker>

React

  <tpg-color-picker
    placeholder="Placeholder"
    selectedValue="colorToolsOrange"
    label="Color picker"
  ></tpg-color-picker>

Event handling

The Color Picker is a controlled component, which means its selection state must be managed externally by your application logic.

When a Menu Item is selected, the component dispatches a tpg-change event. To update the selected value, listen for this event and set the Color Picker’s selected-value property manually based on the event’s payload.

Component

Vanilla JS

  <tpg-color-picker class="handle-change" label="Event being handled here">
  </tpg-color-picker>

  <tpg-color-picker label="No event handling">
  </tpg-color-picker>

  <script>
    document.addEventListener('DOMContentLoaded', ()=>{
      const colorPickers = document.querySelectorAll('tpg-color-picker.handle-change');
      for (const colorPicker of colorPickers) {
        colorPicker.addEventListener("tpg-change", (e) => {
          e.target.selectedValue = e.value;
        });
      }
    });
  </script>

React

  <tpg-color-picker
    label="Event being handled here"
    selectedValue={selectedValue}
    ontpg-change={(e: TpgChangeEvent<string>) => {
      setSelectedValue(e.value ?? '')
    }}
  ></tpg-color-picker>

  <tpg-color-picker label="No event handling"></tpg-color-picker>

Tables

Properties

Attribute	Property	Description	Type	Default Value
options	options	Array of objects containing items to be listed	ColorPickerOption[]
text	text	Text to be displayed in the breadcrumb.	string	''
placeholder	placeholder	Optional placeholder that is visible if value is empty	string	''
message	message	Message to appear on badge if set.	string	''
value	value	The default value on the textfield	string	''
type	type	The type of textfield to render in terms of severity-level.	Exclude<ComboBoxProperties['type'], undefined>	'default'
clear-button	clearButton	Flag that includes a button to clear the text if included.	boolean	false
label	label	Label of the textfield.	string	''
disabled	disabled	Whether or not the color picker is disabled	boolean	false
read-only	readOnly	Whether or not the color picker is read only	boolean	false
selected-value	selectedValue	Value of the currently selected menu item. Can be used to preselect a Menu Item should their values match.	string	''
only-color	onlyColor	Color full width	boolean	false

Events

Event name	Reactjs attribute	Description
tpg-change	ontpg-change	Emitted when an item is selected, containing the value identifier of this item.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox