sp-color-field

quiet

true

false

disabled

true

false

viewColor

true

false

size

Small

Medium

Large

Extra large

NPM 1.0.1

View Storybook

Overview

API

Changelog

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

Small

<sp-color-field size="s" value="#ffff00"></sp-color-field>

Medium

<sp-color-field size="m" value="#ffff00"></sp-color-field>

Large

<sp-color-field size="l" value="#ffff00"></sp-color-field>

Xtra Large

<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) and BB (blue) are hexadecimal integers between 00 and FF 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), and B (blue) are hexadecimal characters between 0 and F. 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). The alpha 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.

Attributes and Properties

Property

Attribute

Type

Default

Description

autocomplete

What form of assistance should be provided when attempting to supply a value to the form control

disabled

boolean

false

Disable this control. It will not receive focus or events

grows

boolean

false

Whether a form control delivered with the `multiline` attribute will change size vertically to accomodate longer input

invalid

boolean

false

Whether the `value` held by the form control is invalid.

label

string

''

A string applied via `aria-label` to the form control when a user visible label is not provided.

maxlength

number

-1

Defines the maximum string length that the user can enter

minlength

number

-1

Defines the minimum string length that the user can enter

multiline

boolean

false

Whether the form control should accept a value longer than one line

name

string | undefined

Name of the form control.

pattern

string | undefined

Pattern the `value` must match to be valid

placeholder

string

''

Text that appears in the form control when it has no value set

quiet

boolean

false

Whether to display the form control with no visible background

readonly

boolean

false

Whether a user can interact with the value of the form control

required

boolean

false

Whether the form control will be found to be invalid when it holds no `value`

rows

number

-1

The specific number of rows the form control should provide in the user interface

tabIndex

number

The tab index to apply to this control. See general documentation about the tabindex HTML property

valid

boolean

false

Whether the `value` held by the form control is valid.

value

string | number

The value held by the form control

viewColor

view-color

boolean

false

Events

Name

Type

Description

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.