LogoSkills

coui-chip

Activate when creating chips, tags, filter options, selectable labels, or removable tag elements using Chip/ChipVariant (Flutter) or Chip (Web) in CoUI Flutter or CoUI Web.

CoUI Chip#

Overview#

The Chip component displays tags, filters, and selection states. It supports deletion buttons, avatars, and selection functionality with two variants: filled and outlined.

Flutter (coui_flutter)#

Import#

import 'package:coui_flutter/coui_flutter.dart';

Basic Usage#

Chip(label: 'Flutter')

Parameters#

ParameterTypeDefaultDescription
labelStringrequiredDisplay text
onDelete VoidCallback? null Removal button handler
avatar Widget? null Left-side avatar widget
variant ChipVariant filled Style variation (filled, outlined)
selected bool false Selection state
onSelected void Function(bool)? null Selection change handler
disabled bool false Enable/disable state

Removable Chip# 

Chip(
  label: 'Dart',
  onDelete: handleDeleteDart,
)

With Avatar#

Chip(
  label: '홍길동',
  avatar: CircleAvatar(
    backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
  ),
  onDelete: handleDeleteUser,
)

Selectable Chip# 

Chip(
  label: '디자인',
  variant: ChipVariant.outlined,
  selected: isDesignSelected,
  onSelected: handleSelectDesign,
)

Chip Group Pattern# 

Wrap(
  spacing: 8,
  children: [
    Chip(label: 'Flutter', onDelete: () => handleDelete('flutter')),
    Chip(label: 'Dart', onDelete: () => handleDelete('dart')),
    Chip(label: 'UI', onDelete: () => handleDelete('ui')),
  ],
)

Web (coui_web)#

Import#

import 'package:coui_web/coui_web.dart';

Basic Usage#

Chip(label: 'Flutter')

With Avatar and Delete# 

Chip(
  label: '홍길동',
  avatar: Avatar(src: 'https://example.com/avatar.jpg'),
  onDelete: handleDeleteUser,
)

Selectable Chip# 

Chip(
  label: '디자인',
  variant: ChipVariant.outlined,
  selected: isDesignSelected,
  onSelected: handleSelectDesign,
)

Common Patterns#

Variants#

VariantDescriptionUse Case
ChipVariant.filled Solid background (default) Standard tag display
ChipVariant.outlinedBorder-onlyFilter selection interfaces

Platform Differences#

AspectFlutterWeb
Widget nameChipChip
Avatar typeWidgetAvatar component
Layout spacing Wrap(spacing:) CSS flex gap classes

When to Use#

  • Tag lists and category labels
  • Filter selection bars
  • User/contact selection chips
  • Removable search criteria