Skip to content
color-picker
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

color-picker

Fragment reference color-picker
tags
ui

Color pickers allow the user to select a color.

Usage

color-picker(label="Select a color")

Formats

Use the format attribute to control the color format.

color-picker(label="Hex" format="hex")
color-picker(label="RGB" format="rgb")

Features

Enable features like opacity and swatches.

color-picker(label="With opacity" opacity)
color-picker(label="With swatches" swatches="#f00; #0f0; #00f")

Attributes

NameTypeDefaultDescription
labelstring-Accessible label.
formathex | rgb | hsl | hsvhexOutput color format.
opacitybooleanfalseEnables opacity slider.
swatchesstring-Semicolon-separated color swatches.
sizesmall | medium | largemediumComponent size.
disabledbooleanfalsePrevents interaction.