Color Picker
Model-value
Controls the selected color. Accepts hex values like *#4a90e2*.
Value: #4a90e2
#4A90E2
<script setup lang="ts">
import { NmorphColorPicker } from "@nmorph/nmorph-ui-kit";
const color = ref("#4a90e2");
</script><template>
<div class="color-picker-model-value-overview">
<p class="nmorph-title-3">Value: {{ color }}</p>
<NmorphColorPicker v-model="color" show-value />
</div>
</template>Thickness
Sets the thickness of the color picker.
<script setup lang="ts">
import { NmorphColorPicker } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="color-picker-thickness-overview">
<NmorphColorPicker thickness="thick" />
<NmorphColorPicker thickness="basic" />
<NmorphColorPicker thickness="thin" />
</div>
</template>Show-value
Displays the selected hex value next to the swatch. If `modelValue` is omitted, the current theme accent color is used.
#000000
<script setup lang="ts">
import { NmorphColorPicker } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="color-picker-show-value-overview">
<NmorphColorPicker show-value />
</div>
</template>Display-format
Sets the format for the displayed color value.
#4A90E2
rgb(74, 144, 226)
hsl(212, 72%, 59%)
<script setup lang="ts">
import { NmorphColorPicker } from "@nmorph/nmorph-ui-kit";
const color = ref("#4a90e2");
</script><template>
<div class="color-picker-display-format-overview">
<NmorphColorPicker v-model="color" show-value display-format="hex" />
<NmorphColorPicker v-model="color" show-value display-format="rgb" />
<NmorphColorPicker v-model="color" show-value display-format="hsl" />
</div>
</template>Disabled
Disables the color picker if set to true.
#6B7280
<script setup lang="ts">
import { NmorphColorPicker } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="color-picker-disabled-overview">
<NmorphColorPicker model-value="#6b7280" show-value disabled />
</div>
</template>