Color Picker

Anatomy

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

Minimal

Pick a color

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

With value

Initial value

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

With presets

Presets + picker

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

With positioning

Placement and gutter

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