Learn how to customize the React Input Group component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
CSS variables
The addon declares its own tokens on .input-group-text, so a single addon can be repainted or resized without a modifier class. The first six are the --cui-control-* frame tokens, copied onto the addon so it lines up with the control next to it; .input-group-{size} re-points all of them but the border width, on the addon and on the .form-control or .form-select next to it. .input-group itself declares none — it is a layout wrapper, and a token set on it reaches neither the addon nor the control, because each declares its own.
$input-group-tokens: () !default;
$input-group-tokens: defaults(
(
--cui-control-padding-y: var(--cui-btn-input-padding-y),
--cui-control-padding-x: var(--cui-btn-input-padding-x),
--cui-control-font-size: var(--cui-btn-input-font-size),
--cui-control-line-height: var(--cui-btn-input-line-height),
--cui-control-border-width: var(--cui-btn-input-border-width),
--cui-control-border-radius: var(--cui-btn-input-border-radius),
--cui-input-group-addon-font-weight: var(--cui-btn-input-font-weight),
--cui-input-group-addon-color: var(--cui-btn-input-fg),
--cui-input-group-addon-bg: var(--cui-bg-2),
--cui-input-group-addon-border-color: var(--cui-btn-input-border-color),
),
$input-group-tokens
);<CInputGroupText style={{ '--cui-input-group-addon-bg': 'var(--cui-bg-1)' }}>@</CInputGroupText>Sass maps
Each entry is one .input-group-{size} class, and the map merges with your overrides — add a key to define a size, or set one to null to drop it:
// stylelint-disable-next-line scss/dollar-variable-default
$input-group-sizes: defaults(
("sm", "lg"),
$input-group-sizes
);