ColorPicker

This component allows the user to select a color with the browser's default color picker control.

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>

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>

label

This property sets the label of the component.

labelBreak (default: false)

This boolean value indicates if the ColorPicker labels can be split into multiple lines if it would overflow the available label width.

labelPosition (default: "top")

Places the label at the given position of the component.

Available values:

labelWidth

This property sets the width of the ColorPicker.

readOnly (default: false)

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

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

required

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>

Events

didChange

This event is triggered when value of ColorPicker has changed.

gotFocus

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

lostFocus

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

Exposed Methods

focus

This method sets the focus on the ColorPicker.

setValue

You can use this method to set the component's current value programmatically (true: checked, false: unchecked).

<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

You can query the component's value. If no value is set, it will retrieve undefined.

Styling

Theme Variables