Color
Allow users to select a color from a color palette.
Anchor to propertiesProperties
- Anchor to alphaalphabooleanDefault: false
Allow user to select an alpha value.
- Anchor to defaultValuedefaultValuestring
The default value for the field.
- Anchor to formResetCallbackformResetCallback() => void
- Anchor to namenamestring
An identifier for the field that is unique within the nearest containing form.
- Anchor to valuevaluestring
The currently selected color.
Supported formats include:
- HSL
Anchor to eventsEvents
Learn more about registering events.
- Anchor to changechangeCallbackEventListener<typeof tagName> | null
- Anchor to inputinputCallbackEventListener<typeof tagName> | null
CallbackEventListener
(EventListener & {
(event: CallbackEvent<T>): void;
}) | nullCallbackEvent
Event & {
currentTarget: HTMLElementTagNameMap[T];
}Examples
<s-color-picker value="#FF0000" alpha />
Preview
Examples
Code
jsx
<s-color-picker value="#FF0000" alpha />html
<s-color-picker value="#FF0000" alpha></s-color-picker>Basic usage
Description
Demonstrates a simple color picker with a pre-selected red color, showing the basic implementation without alpha transparency.
jsx
<s-box padding="large" border="base" borderRadius="base"> <s-color-picker value="#FF0000" name="primary-color" /> </s-box>html
<s-box padding="large" border="base" borderRadius="base"> <s-color-picker value="#FF0000" name="primary-color"></s-color-picker> </s-box>With alpha transparency
Description
Illustrates a color picker with alpha transparency enabled, allowing selection of colors with varying opacity levels.
jsx
<s-box padding="large" border="base" borderRadius="base"> <s-color-picker value="#FF0000FF" alpha name="color-with-alpha" /> </s-box>html
<s-box padding="large" border="base" borderRadius="base"> <s-color-picker value="#FF0000FF" alpha name="color-with-alpha" ></s-color-picker> </s-box>
Anchor to best-practicesBest practices
- Use the alpha slider if you want to allow merchants to select a transparent color
Was this page helpful?