const App = () => <SlColorPickerlabel="Select a color"/>;
```
:::tip
This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
:::
## Examples
### Initial Value
Use the `value` attribute to set an initial value for the color picker.
```html:preview
<sl-color-pickervalue="#4a90e2"label="Select a color"></sl-color-picker>
const App = () => <SlColorPickervalue="#4a90e2"label="Select a color"/>;
```
### Opacity
Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, HSLA, or HSVA based on `format`.
```html:preview
<sl-color-pickervalue="#f5a623ff"opacitylabel="Select a color"></sl-color-picker>
const App = () => <SlColorPickeropacitylabel="Select a color"/>;
```
### Formats
Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, `hsl`, and `hsv`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.
To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.
```html:preview
<sl-color-pickerformat="hex"value="#4a90e2"label="Select a color"></sl-color-picker>
<sl-color-pickerformat="rgb"value="rgb(80, 227, 194)"label="Select a color"></sl-color-picker>
<sl-color-pickerformat="hsl"value="hsl(290, 87%, 47%)"label="Select a color"></sl-color-picker>
<sl-color-pickerformat="hsv"value="hsv(55, 89%, 97%)"label="Select a color"></sl-color-picker>
Use the `swatches` attribute to add convenient presets to the color picker. Any format the color picker can parse is acceptable (including CSS color names), but each value must be separated by a semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.