Available from v1.7.0
ChipView
ChipView is a filter chip component with active/inactive states, optional leading icon, and a remove button for compact option display.
Platform availability: iOS 17.0+
When to use:
- Use ChipView when displaying selected filters, tags, or compact selections that users can toggle or remove.
- Consider using Checkbox when users need to make multiple selections from a list, or Badge for non-interactive status indicators.
It includes the following features:
- Active and inactive states with distinct styling.
- Optional leading icon.
- Remove button for dismissing chips.
- Tap gesture support for state toggling.
- Configurable foreground, background, and border colors.
- Integration with SummaryStackView via SummaryStackRow protocol.
Import
import BackbaseDesignSystem
Visual reference
|
|
|
|
|
|
|
|
API reference
ChipView
A UIView component used primarily as a filter indicator with active/inactive states.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
foregroundColor |
UIColor |
The foreground color for buttons, icons, and text |
|
borderColor |
UIColor |
The border color of the chip |
|
cornerRadius |
DesignSystem.CornerRadiusTypes |
The corner radius. Default is .max() (capsule shape) |
|
stackView |
UIStackView |
The container for title label and remove button |
|
titleLabel |
UILabel |
The title label of the chip |
|
removeButton |
UIButton |
The remove button of the chip |
|
icon |
IconView |
The leading icon view |
|
state |
State |
The current state (.active or .inactive) |
|
customSpacingAfter |
CGFloat? |
The custom spacing in SummaryStackView |
|
onTraitCollectionDidChange |
((UITraitCollection?) -> Void)? |
The callback for trait collection changes |
|
onRemove |
((ChipView) -> Void)? |
The callback when remove button is tapped |
|
onTap |
((ChipView) -> Void)? |
The callback when chip is tapped |
Initializers
init(text:customSpacingAfter:activeStyle:inactiveStyle:)
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String |
The text to display |
|
customSpacingAfter |
CGFloat |
The spacing after this component. Default is 0 |
|
activeStyle |
Style<ChipView> |
The style for active state. Default is DesignSystem.shared.styles.chipView |
|
inactiveStyle |
Style<ChipView> |
The style for inactive state. Default is DesignSystem.shared.styles.chipViewInactive |
init(text:customSpacingAfter:icon:activeStyle:inactiveStyle:)
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String |
The text to display |
|
customSpacingAfter |
CGFloat |
The spacing after this component. Default is 0 |
|
icon |
UIImage? |
The leading icon image. Default is nil |
|
activeStyle |
Style<ChipView> |
The style for active state |
|
inactiveStyle |
Style<ChipView> |
The style for inactive state |
init(text:style:)
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String |
The text to display |
|
style |
Style<ChipView> |
The style block. Default is DesignSystem.shared.styles.chipView |
Methods
setState(_:)
Sets the state of the chip and applies the appropriate style.
|
Parameter |
Type |
Description |
|---|---|---|
|
state |
ChipView.State |
The state to set (.active or .inactive) |
ChipView.State
|
Case |
Description |
|---|---|
|
.active |
Active state with remove button visible |
|
.inactive |
Inactive state with remove button hidden |
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
cornerRadius |
DesignSystem.CornerRadiusTypes |
.max() |
|
foregroundColor |
UIColor |
Brand subtle foreground |
|
borderColor |
UIColor |
Brand subtle border |
|
state |
ChipView.State |
.active |
cornerRadius
The cornerRadius property controls the shape of the chip. The default .max() creates a capsule shape.
let chip = ChipView(text: "Filter")
chip.cornerRadius = .md
foregroundColor
The foregroundColor property sets the color for text, icons, and the remove button.
let chip = ChipView(text: "Custom")
chip.foregroundColor = .systemBlue
Usage
Basic usage
let chip = ChipView(text: "Filter")
With custom styling
let style = DesignSystem.shared.styles.chipView <> { chipView in
chipView.onTraitCollectionDidChange = { _ in
chipView.layer.borderColor = chipView.borderColor.cgColor
}
let closeIcon = DesignSystem.Assets.icClose
chipView.removeButton.setImage(closeIcon, for: .normal)
chipView.backgroundColor = .systemBlue.withAlphaComponent(0.1)
chipView.foregroundColor = .systemBlue
chipView.borderColor = .systemBlue
}
let chip = ChipView(text: "Custom Chip", style: style)
Toggle between active and inactive states
let chip = ChipView(
text: "Toggle Chip",
activeStyle: DesignSystem.shared.styles.chipView,
inactiveStyle: DesignSystem.shared.styles.chipViewInactive
)
chip.onTap = { chip in
let state: ChipView.State = chip.state == .active ? .inactive : .active
chip.setState(state)
}
With leading icon
let thumbnail = DesignSystem.Assets.icEdit
let chip = ChipView(
text: "Edit",
icon: thumbnail
)
Handling remove action
let chip = ChipView(text: "Removable")
chip.onRemove = { chip in
chip.removeFromSuperview()
}
With custom spacing in SummaryStackView
let chip = ChipView(
text: "Category",
customSpacingAfter: 8.0
)
States and variants
Active state
The default state when the chip represents a selected option.
Visual characteristics:
- Brand subtle background color
- Remove button visible
- Full opacity
let chip = ChipView(text: "Selected")
chip.setState(.active)
Inactive state
Displayed when the chip represents an unselected option.
Visual characteristics:
- Muted background color
- Remove button hidden
- Reduced visual prominence
let chip = ChipView(text: "Unselected")
chip.setState(.inactive)
Customization
Styling
|
Style |
Description |
|---|---|
|
DesignSystem.shared.styles.chipView |
Default active chip style |
|
DesignSystem.shared.styles.chipViewInactive |
Inactive chip style |
Events
|
Event |
Type |
Description |
|---|---|---|
|
onRemove |
((ChipView) -> Void)? |
Called when the remove button is tapped |
|
onTap |
((ChipView) -> Void)? |
Called when the chip is tapped |
|
onTraitCollectionDidChange |
((UITraitCollection?) -> Void)? |
Called when the interface environment changes |
let chip = ChipView(text: "Interactive")
chip.onTap = { chip in
print("Chip tapped: \(chip.titleLabel.text ?? "")")
}
chip.onRemove = { chip in
chip.removeFromSuperview()
}
Accessibility
The ChipView component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
Accessibility configuration
|
Property |
Description |
Type |
|---|---|---|
|
accessibilityLabel |
The accessible label for the chip |
String? |
|
isAccessibilityElement |
Whether the chip is an accessibility element |
Bool |
Best practices
- The chip inherits from UIView and the remove button is accessible by default
- The hit area for the remove button is expanded to 44x44 points for better touch targets
- Set meaningful accessibility labels that describe the chip's purpose
- Announce state changes to VoiceOver users
Dependencies
- External dependencies: None
- Internal dependencies:
- SummaryStackRow: Protocol for stack view integration
- IconView: Leading icon display
- DesignSystem.CornerRadiusTypes: Corner radius configuration
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
Tokens are defined in defaultTokens.json, which is integrated in the bundle of the framework, and can be customized by providing your own theme JSON file.
Token groups used by ChipView:
- color/background/brand-subtle: Chip background for active state
- color/on-background/brand-subtle: Text and icon colors on subtle background
Color tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.background.brand-subtle |
{theme.color.background.brand-subtle} |
|
Foreground |
theme.color.on-background.brand-subtle |
{theme.color.on-background.brand-subtle} |
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Colors |
Theme.colors.background.brandSubtle |
Chip background color |
|
Colors |
Theme.colors.onBackground.brandSubtle |
Text and icon color |
|
Typography |
DesignSystem.shared.fonts.preferredFont(.body, .regular) |
Chip text font |
|
Sizer |
DesignSystem.shared.sizer.sm |
Small sizing for chip height |
|
Corner Radius |
DesignSystem.shared.cornerRadius.max |
Capsule corner radius |
|
Styles |
DesignSystem.shared.styles.chipView |
Active chip style |
|
Styles |
DesignSystem.shared.styles.chipViewInactive |
Inactive chip style |