Colorpicker

Display a colour picker so users can select a colour. There are two types of colour pickers. The default HTML colour picker is the default displayed by this component. Once you pass a comma separated string of colours, a custom colour picker is displayed instead.

        
            <x-bladewind::colorpicker  />
        
    

Once you pass a comma separated string of colours, a custom colour picker is displayed instead. These must be HEX colours including the '#' sign. This is useful if you are building a theme based web app that allows users to select their preferred theme for example.

    <x-bladewind::colorpicker
     colors="#fff999, #cccccc, #999222, #787623, #78fcc3, #333678, #878987, #098765"/>

By default the colorpicker does not show the value of the selected colour. It only changes the colour of the box to what has been selected. To show the selected value set show_value="true".

        
        <x-bladewind::colorpicker show_value="true" />
        
    

The colorpicker comes in different sizes to match with input fields. In case the component is being used in a form with other fields. The default size is regular.

    
        <x-bladewind::colorpicker size="small"  />
    

    
        <x-bladewind::colorpicker size="regular"  />
    

    
        <x-bladewind::colorpicker size="medium"  />
    

    
        <x-bladewind::colorpicker size="big"  />
    

In order to access selected colour values when a form is submitted, provide a name for your colorpicker. BladewindUI provides a random unique name when no name is provided.

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Colorpicker component.

Colorpicker with all attributes defined

    <x-bladewind::colorpicker
        name="theme"
        size="medium"
        show_value="true"
        colors="#989098, #cccc44, #323232"
        selected_value="#909090"
        class="shadow-sm" />