Chip

The Chip Set component is a container for multiple Chip elements, providing selection, deletion, and keyboard navigation capabilities. Chips are compact elements representing attributes, tags, or choices.

Basic usage

The Chip Set component can be used in three modes: standard, selectable, or deletable. Each mode provides specific interaction patterns.

Component anatomy

Chip Variants

The Chip Set supports three main variants through different selectors:

• Standard: <lmn-chip-set> - Basic chip display
• Selectable: <lmn-chip-set-selectable> - Allows chip selection
• Deletable: <lmn-chip-set-deletable> - Enables chip removal

Chip Size

Each chip can be configured using the size Input with two options:

• MD (default): Standard size
• SM: Compact size

Content Types

Chips support multiple content configurations:

• Text only
• Icon with text
• Avatar with text
• External link indicators (for anchor chips)

Each content type automatically adjusts spacing and layout.

Interactive States

Chips support various states through inputs:

• disabled: Disables chip interaction
• selected: Marks chip as selected (in selectable mode)
• negative: Adapts styling for dark backgrounds
• value: Associates data with the chip

Deletable Behavior

In deletable mode, chips include:

• Delete button with tooltip
• Keyboard delete support
• Focus management after deletion
• Automatic focus transfer to adjacent chip

Accessibility

Keyboard Navigation

The Chip Set implements comprehensive keyboard support:

• Left/Right arrows for chip navigation
• Space/Enter for selection or activation
• Backspace/Delete for chip removal (in deletable mode)
• Tab for entering/leaving the chip set

ARIA Implementation

The component includes proper ARIA attributes:

• listbox role for chip sets
• option role for individual chips
• Selected state announcements
• Disabled state management
• Live regions for dynamic updates

Focus Management

Focus handling ensures a smooth user experience:

• Visual focus indicators
• Focus retention after deletion
• Proper focus order
• Disabled state handling
• Automatic focus transfer

Best Practices for Developers

1. Selection Management DEMO HERE

2. Deletion Handling DEMO HERE

3. Keyboard Support DEMO HERE