sp-color-field
NPM
0.48.1
Storybook
View Storybook
0.48.1 (2024-10-01) #
Note: Version bump only for package @spectrum-web-components/color-field
0.48.0 (2024-09-17) #
Note: Version bump only for package @spectrum-web-components/color-field
0.47.2 (2024-09-03) #
Note: Version bump only for package @spectrum-web-components/color-field
0.47.1 (2024-08-27) #
Note: Version bump only for package @spectrum-web-components/color-field
0.47.0 (2024-08-20) #
Note: Version bump only for package @spectrum-web-components/color-field
0.46.0 (2024-08-08) #
Note: Version bump only for package @spectrum-web-components/color-field
0.45.0 (2024-07-30) #
Note: Version bump only for package @spectrum-web-components/color-field
0.44.0 (2024-07-15) #
Note: Version bump only for package @spectrum-web-components/color-field
0.43.0 (2024-06-11) #
Note: Version bump only for package @spectrum-web-components/color-field
0.42.5 (2024-05-24) #
Note: Version bump only for package @spectrum-web-components/color-field
0.42.4 (2024-05-14) #
Note: Version bump only for package @spectrum-web-components/color-field
0.42.3 (2024-05-01) #
Note: Version bump only for package @spectrum-web-components/color-field
0.42.2 (2024-04-03) #
Note: Version bump only for package @spectrum-web-components/color-field
0.42.1 (2024-04-02) #
Note: Version bump only for package @spectrum-web-components/color-field
0.42.0 (2024-03-19) #
Bug Fixes #
- color-field: added missing dependencies (
#4141 ) (b3bb23a )
0.41.2 (2024-03-05) #
Bug Fixes #
- color-field: add color-field package (
#3870 ) (5081634 )
Attributes and Properties #
autocomplete
autocomplete
| 'list' | 'none' | HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'] | undefined
disabled
disabled
boolean
false
grows
grows
boolean
false
invalid
invalid
boolean
false
label
label
string
''
maxlength
maxlength
number
-1
minlength
minlength
number
-1
multiline
multiline
boolean
false
name
name
string | undefined
pattern
pattern
string | undefined
placeholder
placeholder
string
''
quiet
quiet
boolean
false
readonly
readonly
boolean
false
required
required
boolean
false
rows
rows
number
-1
tabIndex
tabIndex
number
valid
valid
boolean
false
value
value
string | number
viewColor
view-color
boolean
false
Events #
change
Event
An alteration to the value of the color-field has been committed by the user.
input
Event
The value of the color-field has changed.
Description #
<sp-color-field>
elements are textfields that allow users to input custom color values. Color formats supported are HEX, RGB, HSL, HSV, and shorthand HEX
Usage #
yarn add @spectrum-web-components/color-field
Import the side effectful registration of <sp-color-field>
via:
import '@spectrum-web-components/color-field/sp-color-field.js';
When looking to leverage the ColorField
base class as a type and/or for extension purposes, do so via:
import { ColorField } from '@spectrum-web-components/color-field';
Sizes #
<sp-color-field size="s" value="#ffff00"></sp-color-field>
<sp-color-field size="m" value="#ffff00"></sp-color-field>
<sp-color-field size="l" value="#ffff00"></sp-color-field>
<sp-color-field size="xl" value="#ffff00"></sp-color-field>
View Color #
When view-color
is true, the color handle will be rendered. This is useful for development and debugging purposes.
<sp-color-field view-color value="#f00"></sp-color-field>
Read Only #
A readonly color field
<sp-color-field readonly value="#ffff00"></sp-color-field>
Quiet #
A Quiet color field
<sp-color-field quiet value="#e6e600"></sp-color-field>
Invalid Input #
If the input value is not a valid color, <sp-color-field>
will not accept it.
<sp-color-field value="not a color"></sp-color-field>
Valid Input #
If the input value is a valid color, the <sp-color-field>
will accept it and the color handle will be updated to reflect the new color.
<sp-color-field>
component accepts color values in various formats: HEX, RGB, HSL, HSV, and shorthand HEX
- HEX: A hexadecimal color is specified with:
#RRGGBB
.RR
(red),GG
(green) andBB
(blue) are hexadecimal integers between00
andFF
specifying the intensity of the color.
<sp-color-field value="#ff0000"></sp-color-field>
- Shorthand HEX: Shorthand hexadecimal color values are also supported.
#RGB
is a shorthand for#RRGGBB
. In the shorthand form,R
(red),G
(green), andB
(blue) are hexadecimal characters between0
andF
. Each character is repeated to create the full 6-digit color code. For example,#123
would expand to#112233
.
<sp-color-field view-color value="#f00"></sp-color-field>
- RGB: An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of the color with a value between 0 and 255.
<sp-color-field view-color value="rgb(0,2555,0)"></sp-color-field>
- RGBA: An RGBA color value is specified with:
rgba(red, green, blue, alpha)
. Thealpha
parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
<sp-color-field view-color value="rgba(0,255,0,0.3)"></sp-color-field>
- HSL: An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and lightness are percentages.
<sp-color-field view-color value="hsl(234, 70%, 50%)"></sp-color-field>
- HSV: An HSV color value is specified with: hsv(hue, saturation, value). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and value are percentages.
<sp-color-field view-color value="hsv(0, 70%, 50%)"></sp-color-field>
Events #
The sp-color-field component fires a change event when the color value is changed. You can listen for this event to react to changes in the color value.