Reference Source
import {ColorInput} from '@adobe/coral-spectrum'
public class | source

ColorInput

Expression Extends:

class ColorInput extends BaseFormField(BaseComponent(HTMLElement))

A ColorInput component than can be used as a form field to select from a list of color options.

See:

Example:

Markup
<coral-colorinput></coral-colorinput>
JS constructor
new Coral.ColorInput();

Static Member Summary

Static Public Members
public static

Returns ColorInput auto generated colors options.

public static

Returns ColorInput color properties display options.

public static

Returns ColorInput default colors display options.

public static

Returns ColorInput swatches display options.

public static

Returns ColorInput variants.

Member Summary

Public Members
public

Should shades (darker colors) or tints (lighter colors) automatically be generated.

public

Whether this field is disabled or not.

public

invalid: *

Inherited from BaseFormField#invalid.

public

The Collection Interface that allows interacting with the items that the component contains.

public

Inherited from BaseFormField#labelledBy.

public

Name used to submit the data in a form.

public

Returns the inner overlay to allow customization.

public

Short hint that describes the expected value of the ColorInput.

public

Whether this field is readOnly or not.

public

Whether this field is required or not.

public

The selected item in the ColorInput.

public

Whether default colors should be displayed.

public

Whether properties view should be displayed.

public

Whether swatches view should be displayed.

public

The value of the color.

public

Convenient property to get/set the the current color.

public

The ColorInput variant.

Static Public Members

public static autoGenerateColors: ColorInputAutoGenerateColorsEnum: * source

Returns ColorInput auto generated colors options.

public static showDefaultColors: ColorInputShowDefaultColorsEnum: * source

Returns ColorInput color properties display options.

public static showProperties: ColorInputShowPropertiesEnum: * source

Returns ColorInput default colors display options.

public static showSwatches: ColorInputShowSwatchesEnum: * source

Returns ColorInput swatches display options.

public static variant: ColorInputVariantEnum: * source

Returns ColorInput variants.

Public Members

public autoGenerateColors: String source

Should shades (darker colors) or tints (lighter colors) automatically be generated. See ColorInputAutoGenerateColorsEnum.

  • Coral.ColorInput.autoGenerateColors.OFF by default.

public disabled: Boolean source

Whether this field is disabled or not.

  • false by default.
  • reflected

public invalid: * source

Inherited from BaseFormField#invalid.

public items: SelectableCollection source

The Collection Interface that allows interacting with the items that the component contains.

  • read-only

public labelledBy: * source

Inherited from BaseFormField#labelledBy.

public name: String source

Name used to submit the data in a form.

  • "" by default.
  • reflected

public overlay: Popover source

Returns the inner overlay to allow customization.

  • read-only

public placeholder: String source

Short hint that describes the expected value of the ColorInput. It is displayed when the ColorInput is empty and the variant is Coral.ColorInput.variant.DEFAULT

  • "" by default.
  • reflected

public readOnly: Boolean source

Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.

  • false by default.
  • reflected

public required: Boolean source

Whether this field is required or not.

  • false by default.
  • reflected

public selectedItem: HTMLElement source

The selected item in the ColorInput.

  • read-only

public showDefaultColors: String source

Whether default colors should be displayed. Link ColorInputShowDefaultColorsEnum.

  • ColorInputShowDefaultColorsEnum.ON by default.

public showProperties: String source

Whether properties view should be displayed. See ColorInputColorProperties.

  • ColorInputShowPropertiesEnum.ON by default.

public showSwatches: ColorInputSwatches source

Whether swatches view should be displayed. See ColorInputSwatches.

  • ColorInputShowSwatchesEnum.ON by default.

public value: String source

The value of the color. This value can be set in 5 different formats (HEX, RGB, RGBA, HSB and CMYK). Corrects a hex value, if it is represented by 3 or 6 characters with or without '#'

e.g: HEX: #FFFFFF RGB: rgb(16,16,16) RGBA: rgba(215,40,40,0.9) RGBA: hsb(360,100,100) CMYK: cmyk(0,100,50,0)

  • "" by default.

public valueAsColor: Color source

Convenient property to get/set the the current color. If the value is no valid color it will return null (The getter will return a copy of the current selected color).

public variant: String source

The ColorInput variant. See ColorInputVariantEnum.

  • ColorInputVariantEnum.DEFAULT by default.
  • reflected