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>

Example: using ColorPicker

<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>

Example: using ColorPicker

<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. If not set, the component will not display a label.

`labelBreak` (default: true)

This boolean value indicates whether the ColorPicker label 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:

Value	Description
`start`	The left side of the input (left-to-right) or the right side of the input (right-to-left)
`end`	The right side of the input (left-to-right) or the left side of the input (right-to-left)
`top`	The top of the input (default)
`bottom`	The bottom of the input

`labelWidth`

This property sets the width of the ColorPicker component's label. If not defined, the label's width will be determined by its content and the available space.

`readOnly` (default: false)

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

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

Example: readOnly

<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:

Value	Description
`valid`	Visual indicator for an input that is accepted
`warning`	Visual indicator for an input that produced a warning
`error`	Visual indicator for an input that produced an error

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

Example: validationStatus

<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`

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>

Example: setValue

<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

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-ColorPicker	none	none
borderColor-ColorPicker-default	none	none
borderColor-ColorPicker-default--focus	none	none
borderColor-ColorPicker-default--hover	none	none
borderColor-ColorPicker-error	none	none
borderColor-ColorPicker-error--focus	none	none
borderColor-ColorPicker-error--hover	none	none
borderColor-ColorPicker-success	none	none
borderColor-ColorPicker-success--focus	none	none
borderColor-ColorPicker-success--hover	none	none
borderColor-ColorPicker-warning	none	none
borderColor-ColorPicker-warning--focus	none	none
borderColor-ColorPicker-warning--hover	none	none
borderRadius-ColorPicker-default	none	none
borderRadius-ColorPicker-error	none	none
borderRadius-ColorPicker-success	none	none
borderRadius-ColorPicker-warning	none	none
borderStyle-ColorPicker-default	none	none
borderStyle-ColorPicker-error	none	none
borderStyle-ColorPicker-success	none	none
borderStyle-ColorPicker-warning	none	none
borderWidth-ColorPicker-default	none	none
borderWidth-ColorPicker-error	none	none
borderWidth-ColorPicker-success	none	none
borderWidth-ColorPicker-warning	none	none
boxShadow-ColorPicker-default	none	none
boxShadow-ColorPicker-default--focus	none	none
boxShadow-ColorPicker-default--hover	none	none
boxShadow-ColorPicker-error	none	none
boxShadow-ColorPicker-error--focus	none	none
boxShadow-ColorPicker-error--hover	none	none
boxShadow-ColorPicker-success	none	none
boxShadow-ColorPicker-success--focus	none	none
boxShadow-ColorPicker-success--hover	none	none
boxShadow-ColorPicker-warning	none	none
boxShadow-ColorPicker-warning--focus	none	none
boxShadow-ColorPicker-warning--hover	none	none

ColorPicker

Using ColorPicker

Properties

autoFocus (default: false)

enabled (default: true)

initialValue

label

labelBreak (default: true)

labelPosition (default: "top")

labelWidth

readOnly (default: false)

required (default: false)

validationStatus (default: "none")