React Chip Input Component Styling

Chip Input Styling

Learn how to customize the React Chip Input component with CSS variables and Sass for flexible styling and better form integration.

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. Override any group token on the element CChipInput renders, through style, 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

const customVars = {
  '--cui-control-padding-y': '0.5rem',
  '--cui-control-border-color': 'var(--cui-primary-base)',
}

return <CChipInput style={customVars} placeholder="Add value" />

Sass maps

Each size is one entry, and the map merges with your overrides — add a key to define a size, or set one to null to drop it:

scss

// stylelint-disable-next-line scss/dollar-variable-default
$chip-input-sizes: defaults(
  (
    "sm": (
      padding-y:     .125rem,
      padding-x:     .5rem,
      border-radius: var(--cui-radius-3),
      gap:           .125rem,
    ),
    "lg": (
      padding-y:     .375rem,
      padding-x:     1rem,
      border-radius: var(--cui-radius-5),
      gap:           .5rem,
    ),
  ),
  $chip-input-sizes
);