NbColorStrip is a row of color swatches that acts as a color picker. It supports single selection, multi-selection, wrapping into a square grid, a null/clear option, and a view-only mode.
<template>
<NbColorStrip v-model="color" label="Theme Color" :options="options" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const color = ref('')
const options = [
{ value: 'grape', color: '#5c35c4' },
{ value: 'emerald', color: '#4acf7b' },
{ value: 'ocean', color: '#214da6' },
]
</script>Wrap mode
Set wrap to true to break the strip into a near-square grid. The number of columns is computed as ceil(sqrt(totalColors)), so 9 colors render as 3×3, and 8 colors render in 3 columns.
<template>
<NbColorStrip v-model="color" label="Color" :options="options" wrap />
</template>Multiple selection
Set allowMultiple to true to allow selecting more than one color. The model becomes an array of selected values. The showNull option is ignored in multiple mode.
<template>
<NbColorStrip v-model="colors" :options="options" :allow-multiple="true" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const colors = ref<string[]>(['ocean'])
</script>Null / clear option
Set showNull to true to prepend a swatch that represents no value (null). In single mode, it acts as a clear action. The null swatch renders the empty icon, shown with duotone weight when selected.
<template>
<NbColorStrip v-model="color" :options="options" showNull />
</template>View-only mode
Use onlyView to display the selected color without allowing interaction.
Automatic contrast
When a color is selected, a check icon is rendered on top of the swatch. The component automatically calculates whether to use a black or white icon based on the background color to ensure legibility.
CSS custom properties are also supported as option colors — the component resolves the computed value at runtime.
<template>
<NbColorStrip
:options="[{ value: 'brand', color: 'var(--nb-c-primary)' }, '#F59E0B']"
v-model="color"
/>
</template>