CoUI ChipInput#

Overview#

The ChipInput is a multi-item input component where users type text and press Enter to add items as chips (tags). It supports maximum chip limits, input validation, and individual add/remove callbacks. Flutter uses ChipInput while Web uses ChipInput.

Flutter (coui_flutter)#

Import#

import 'package:coui_flutter/coui_flutter.dart';

Basic Chip Input#

ChipInput(
  values: selectedTags,
  onChanged: handleTagsChanged,
  placeholder: '태그 입력 후 Enter',
)

With Maximum Chips Limit#

ChipInput(
  values: selectedSkills,
  onChanged: handleSkillsChanged,
  onAdd: handleSkillAdded,
  onRemove: handleSkillRemoved,
  placeholder: '스킬 추가',
  maxChips: 5,
)

With Input Validation#

ChipInput(
  values: emailList,
  onChanged: handleEmailListChanged,
  placeholder: '이메일 추가',
  validator: (value) {
    final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
    if (!emailRegex.hasMatch(value)) return '유효한 이메일을 입력하세요';
    return null;
  },
)

Parameters#

Web (coui_web)#

Import#

import 'package:coui_web/coui_web.dart';

Basic ChipInput#

ChipInput(
  values: selectedTags,
  onChanged: handleTagsChanged,
  placeholder: '태그 입력 후 Enter',
)

With Max Chips#

ChipInput(
  values: selectedSkills,
  onChanged: handleSkillsChanged,
  maxChips: 5,
  placeholder: '스킬 추가',
)

Common Patterns#

Use Cases#

• Tag Input: maxChips: 10 with placeholder "Enter tags"
• Email Recipients: Use validator for email format validation

Platform Differences#