Color Picker · Anatomy

No value, initial value, presets, and popover placement.

Minimal

Pick a color

    <.color_picker
  value="rgb(25, 9, 192, 0.9)"
  label="Select Color (RGBA)"
  presets={["#ff0000", "#00ff00", "#0000ff", "rgb(25, 9, 192, 0.9)"]}
  class="color-picker"
/>

With value

Initial value

    <.color_picker
  value="#22c55e"
  label="Initial value"
  class="color-picker"
/>

With presets

Presets + picker

    <.color_picker
  value="#3b82f6"
  label="Presets + picker"
  presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
  class="color-picker"
/>

With positioning

Placement and gutter

    <.color_picker
  value="#3b82f6"
  label="Placement and gutter"
  positioning={%Corex.Positioning{placement: "left-start", gutter: 12}}
  class="color-picker"
/>