Vue Chip Input Component Styling

Chip Input Styling

Learn how to customize the Vue Chip Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.

On this page

CSS variables

A chip input is a .form-control-group, so it reads the group’s --cui-control-* tokens; .chip-input only re-points the ones it sets differently — padding, border colour and radius, and the gap between chips. class and style on <CChipInput> land on that element, so override any group token there to restyle a single chip input.

scss

$chip-input-tokens: () !default;
$chip-input-tokens: defaults(
  (
    --cui-control-padding-y: .25rem,
    --cui-control-padding-x: .75rem,
    --cui-control-border-color: var(--cui-border-color),
    --cui-control-border-radius: var(--cui-radius-4),
    --cui-control-group-gap: .375rem,
  ),
  $chip-input-tokens
);

How to use CSS variables

<template>
  <CChipInput :style="vars">...</CChipInput>
</template>

<script setup>
const vars = {
  '--cui-control-bg': '#f8f9fa',
  '--cui-control-group-gap': '.5rem',
}
</script>