Color Picker
<ahi-color-picker> | AhiColorPicker
The color picker is used to let users select a color visually. For example, users use the color picker to customize the primary color for their patient portal.
Used when users need to select a color to make the selection a visual task rather than a technical one.
<ahi-color-picker label="Select a color"></ahi-color-picker>
Examples
Initial value
Use the value attribute to set an initial value for the color picker.
<ahi-color-picker value="#0A77BC" label="Select a color"></ahi-color-picker>
Opacity
Use the opacity attribute to enable the opacity slider. When this is enabled, the value will be
displayed as HEXA.
<ahi-color-picker value="#00964C80" opacity label="Select a color"></ahi-color-picker>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/color-picker/color-picker.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/color-picker/color-picker.js';Slots
| Name | Description |
|---|---|
label
|
The color picker’s form label. Alternatively, you can use the label attribute. |
error
|
An error message shown once the control is invalid. Plain text can be set with the
error property instead; use this slot when the message needs markup.
|
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
value
|
The current value of the color picker. The value’s format will vary between HEX or HEXA depending on if opacity is enabled. The value is submitted as a name/value pair with form data. |
string
|
''
|
|
defaultValue
|
The default value of the form control. Primarily used for resetting the form control. |
string
|
''
|
|
label
|
The color picker’s label. This will not be displayed, but it will be announced by assistive devices.
If you need to display HTML, you can use the label slot` instead.
|
string
|
''
|
|
name
|
The name of the form control, submitted as a name/value pair with form data. |
string
|
''
|
|
disabled
|
Disables the color picker. |
boolean
|
false
|
|
hoist
|
Deprecated. Enabled a fixed positioning strategy to keep the panel from being
clipped by a container with overflow: auto|scroll. The panel now renders in the
browser’s native top layer, which escapes clipping containers on its own, so this has no effect
except as a fallback on browsers without Popover API support. Remove it from your markup; no
replacement is needed.
|
boolean
|
false
|
|
opacity
|
Shows the opacity slider. Enabling this will cause the formatted value to be HEXA. |
boolean
|
false
|
|
required
|
Makes the color picker a required field. |
boolean
|
false
|
|
validity
|
Gets the validity state object | - | - | |
validationMessage
|
Gets the validation message | - | - | |
formId
form
|
By default, form controls are associated with the nearest containing
<form> element. This attribute allows you to place the form control outside of a
form and associate it with the form that has this id. The form must be in the same
document or shadow root for this to work.
|
string
|
''
|
|
form
|
The form the control is associated with, following the native form-control contract: reading returns
the associated <form> element (or null if there is none), assigning
takes a form id — assign an empty string to restore association with the nearest containing form.
|
HTMLFormElement | null
|
- | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Events
| Name | Description | Event Detail |
|---|---|---|
ahi-blur |
Emitted when the color picker loses focus. | - |
ahi-change |
Emitted when the color picker’s value changes. | - |
ahi-focus |
Emitted when the color picker receives focus. | - |
ahi-input |
Emitted when the color picker receives input. | - |
ahi-invalid |
Emitted when the form control has been checked for validity and its constraints aren’t satisfied. | - |
Learn more about events.
Methods
| Name | Description | Arguments |
|---|---|---|
focus() |
Sets focus on the color picker. |
options: FocusOptions
|
blur() |
Removes focus from the color picker. | - |
checkValidity() |
Checks for validity but does not show a validation message. Returns true when valid and
false when invalid.
|
- |
reportValidity() |
Checks for validity and shows the browser’s validation message if the control is invalid. | - |
setCustomValidity() |
Sets a custom validation message. Pass an empty string to restore validity. |
message: string
|
resetValidity() |
Hides validity again, returning the control to its pristine state: it stops matching
:user-invalid and drops its error styling until the user next interacts with it. The
value and the validity are both untouched — an empty required control is still invalid and still
blocks submission. This only changes whether that invalidity is shown. Interaction state
otherwise has exactly one automatic exit, form.reset(). Call this when the application
replaces a value itself and the old error no longer describes anything the user did: loading a
draft, switching which record is being edited, or clearing a filter row.
|
- |
Learn more about methods.
Custom Properties
| Name | Description | Default |
|---|---|---|
--grid-handle-size |
The size of the color grid’s handle. | 16px |
--slider-height |
The height of the hue and alpha sliders. | 15px |
--slider-handle-size |
The diameter of the slider’s handle. This control inherits setCustomValidity(message),
checkValidity() and reportValidity() from the form-control base class.
Because they are inherited rather than declared here, they do not appear in this component’s
generated type definitions – which is why they are easy to conclude do not exist. They do, and they
work.
|
17px |
Learn more about customizing CSS custom properties.
CSS Parts
| Name | Description |
|---|---|
form-control |
The form control that wraps the label, input, and help text. |
form-control-label |
The label’s wrapper. |
form-control-error |
The error text’s wrapper. |
base |
Deprecated. Use the color-picker part instead. |
color-picker |
The component’s outer wrapper. |
trigger |
The color picker’s dropdown trigger. |
grid |
The color grid. |
grid-handle |
The color grid’s handle. |
slider |
Hue and opacity sliders. |
slider-handle |
Hue and opacity slider handles. |
hue-slider |
The hue slider. |
hue-slider-handle |
The hue slider’s handle. |
opacity-slider |
The opacity slider. |
opacity-slider-handle |
The opacity slider’s handle. |
input |
The text input. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<ahi-dropdown><ahi-icon><ahi-input><ahi-popup>