picker'wheel' | 'square''wheel'chose between pickers style
valuea valid color string'#000'the initial color value
model'rgb' | 'hex' | 'hsl''rgb'the output color model
menuPosition'top' | 'bottom' | 'left' | 'right' | 'center''bottom'the output color model
showHistorybooleantrueshow a list of the recent colors at the bottom of the picker
colorHistorystring[]nulla list of strings representing color values. If provided it will isolate the picker from other pickers and it will maintain its own list.
displayString'vertical'controls the layout of the component. List of allowed values.
draggableBooleantrueturn on/off dragging the picker menu
enableAlphaBooleantrueturn on/off the alpha slider
rgbSlidersBooleanfalseshow/hide rgb sliders

Display Modes

Verte currently has two display layouts:

  • picker: The component is hidden until the user presses on the input, then it is displayed vertically.
  • widget: The component is always displayed vertically, the trigger input is hidden.

We are planning for horizontal and horizontal-widge in the future. You can view the different layouts here


you can pass to verte slot an element(icon) to replace the guide circle icon.


The guide icon color and fill style will change to the current selected color, if you want parts of your icon not to change, you have add fill/color style inline.


  <verte :picker="wheel" :model="rgb">

    <svg viewBox="0 0 24 24">
      <path d="M0 20h24v4H0z"/>
      <path style="fill: #000" d="M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z"/>



NamePayload TypeDescription
inputstringEmits a string representation of the model for the selected color value