ColorPicker

ColorPicker enables users to choose colors by specifying RGB, HSL, or HEX values.

Using ColorPicker

This component allows you to edit or select a color using RGB, HSL, or CSS HEX notation. It displays a popup over the UI and lets you use the mouse or keyboard to edit or select a color.

<App>
  <ColorPicker id="colorPicker" label="Select your favorite color" />
  <Text>Selected color: {colorPicker.value}</Text>
</App>

<App>
  <ColorPicker id="colorPicker" label="Select your favorite color" />
  <Text>Selected color: {colorPicker.value}</Text>
</App>

Behaviors

This component supports the following behaviors:

Properties

autoFocus

default: false

If this property is set to true, the component gets the focus automatically when displayed.

enabled

default: true

This boolean property value indicates whether the component responds to user events (true) or not (false).

initialValue

This property sets the component's initial value.

<App>
  <ColorPicker 
    id="colorPicker" 
    label="Select your favorite color" 
    initialValue="#ff0080"
    />
  <Text>Selected color: {colorPicker.value}</Text>
</App>

<App>
  <ColorPicker 
    id="colorPicker" 
    label="Select your favorite color" 
    initialValue="#ff0080"
    />
  <Text>Selected color: {colorPicker.value}</Text>
</App>

readOnly

default: false

Set this property to true to disallow changing the component value.

<App>
  <ColorPicker initialValue="#ffff00" label="Cannot be edited" readOnly />
</App>

<App>
  <ColorPicker initialValue="#ffff00" label="Cannot be edited" readOnly />
</App>

required

default: false

Set this property to true to indicate it must have a value before submitting the containing form.

validationStatus

default: "none"

This property allows you to set the validation status of the input component.

Available values:

<App>
  <ColorPicker initialValue="#c0c0ff" label="Valid" validationStatus="valid" />
  <ColorPicker initialValue="#c0c0ff" label="Warning" validationStatus="warning" />
  <ColorPicker initialValue="#c0c0ff" label="Error" validationStatus="error" />
</App>

<App>
  <ColorPicker initialValue="#c0c0ff" label="Valid" validationStatus="valid" />
  <ColorPicker initialValue="#c0c0ff" label="Warning" validationStatus="warning" />
  <ColorPicker initialValue="#c0c0ff" label="Error" validationStatus="error" />
</App>

Events

didChange

This event is triggered when value of ColorPicker has changed.

Signature: didChange(newValue: any): void

• newValue: The new value of the component.

gotFocus

This event is triggered when the ColorPicker has received the focus.

Signature: gotFocus(): void

lostFocus

This event is triggered when the ColorPicker has lost the focus.

Signature: lostFocus(): void

Exposed Methods

focus

Focus the ColorPicker component.

Signature: focus(): void

setValue

This method sets the current value of the ColorPicker.

Signature: set value(value: string): void

• value: The new value to set for the color picker.

<App>
  <App>
    <ColorPicker 
      id="colorPicker" 
      label="Select your favorite color" 
      initialValue="#808080" />
    <HStack>
      <Button
        label="Set to red"
        onClick="colorPicker.setValue('#ff0000')" />
      <Button
        label="Set to green"
        onClick="colorPicker.setValue('#00c000')" />
      <Button
        label="Set to blue"
        onClick="colorPicker.setValue('#0000ff')" />
    </HStack>
  </App>
</App>

<App>
  <App>
    <ColorPicker 
      id="colorPicker" 
      label="Select your favorite color" 
      initialValue="#808080" />
    <HStack>
      <Button
        label="Set to red"
        onClick="colorPicker.setValue('#ff0000')" />
      <Button
        label="Set to green"
        onClick="colorPicker.setValue('#00c000')" />
      <Button
        label="Set to blue"
        onClick="colorPicker.setValue('#0000ff')" />
    </HStack>
  </App>
</App>

value

This method returns the current value of the ColorPicker.

Signature: get value(): string

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

• input: The color picker input element.

Styling

Theme Variables