Color Picker

//Not available for this version

//Not available for this version

//Not available for this version

//Not available for this version

<form action="#">
	<div class="form-group">
		<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
	</div>
	<div class="form-group">
		<label class="form-label">Bootstrap colorpicker JS</label>
		<div class="input-group color-picker">
			<div class="input-group-text colorpicker-input-addon"><input type="color"></div>
			<input type="text" class="form-control colorpicker-value" value="#009B84"/>
		</div>
	</div>
</form>

<template>
    <BForm>
        <BFormGroup class="mb-3">
            <BFormInput
              id="exampleColorInput"
              type="color"
              model-value="#563d7c"
              title="Choose your color"
            />
        </BFormGroup>
        <BFormGroup label="Bootstrap colorpicker" label-for="exampleColorInput2">
            <BInputGroup class="color-picker" title="Using horizontal option">
                <BInputGroupText class="colorpicker-input-addon">
                    <BFormInput
                      v-model="pickedColor"
                      type="color"
                      class="p-0"
                    />
                </BInputGroupText>
                <BFormInput type="text" v-model="pickedColor" />
            </BInputGroup>
        </BFormGroup>
    </BForm>
</template>
<script>
export default {
  setup() {
    const pickedColor = ref("#009B84");
    return {
      pickedColor,
    };
  },
};
</script>

<template>
    <BForm>
        <BFormGroup class="mb-3">
            <BFormInput
              id="exampleColorInput"
              type="color"
              model-value="#563d7c"
              title="Choose your color"
            />
        </BFormGroup>
        <BFormGroup label="Bootstrap colorpicker" label-for="exampleColorInput2">
            <BInputGroup class="color-picker" title="Using horizontal option">
                <BInputGroupText class="colorpicker-input-addon">
                    <BFormInput
                      v-model="pickedColor"
                      type="color"
                      class="p-0"
                    />
                </BInputGroupText>
                <BFormInput type="text" v-model="pickedColor" />
            </BInputGroup>
        </BFormGroup>
    </BForm>
</template>
<script>
export default {
  setup() {
    const pickedColor = ref("#009B84");
    return {
      pickedColor,
    };
  },
};
</script>

<form action="#">
	<div class="form-group">
		<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
	</div>
	<div class="form-group">
		<label class="form-label">Bootstrap colorpicker JS</label>
		<div class="input-group color-picker">
			<div class="input-group-text colorpicker-input-addon"><input type="color"></div>
			<input type="text" class="form-control colorpicker-value" value="#009B84"/>
		</div>
	</div>
</form>