mode

The mode prop controls how users can add items to Chipster. It supports two modes that determine the input behavior and item addition logic.

Type Definition

type Mode = 'free' | 'suggestions-only';

Basic Usage

import { Chipster } from '@micoblanc/chipster'
export default function BasicExample() {
return (
<Chipster mode="free">
<Chipster.ItemList />
<Chipster.Input placeholder="Type anything..." />
</Chipster>
)
}

Suggestions-Only Mode

 
export default function SuggestionsOnlyExample() {
 
const getSuggestions = (input: string) => [
  { label: 'React', icon: <ReactIcon /> },
  { label: 'Vue', icon: <VueIcon /> },
  { label: 'Angular', icon: <AngularIcon /> }
  ].filter(item =>
  item.label.toLowerCase().includes(input.toLowerCase())
)
 
return (
<Chipster mode="suggestions-only">
  <Chipster.ItemList />
  <Chipster.Input placeholder="Select from suggestions..." />
  <Chipster.Suggestions getSuggestions={getSuggestions} />
</Chipster>
)
}

Mode Behaviors

Free Mode (default)

• Users can type and add any value
• Suggestions are optional and complementary
• Values go through validation if configured
• Supports transformation of input
• Ideal for tags, emails, or custom inputs

Suggestions-Only Mode

• Users can only select from provided suggestions
• Direct text input is disabled
• Validation still applies to selected suggestions
• Perfect for controlled vocabularies or predefined options
• Ensures data consistency

With Validation

export default function ValidationExample() {
return (
<Chipster mode="free">
<Chipster.ItemList />
<Chipster.Input placeholder="Add tag..." />
<Chipster.Validation
validationRules={[
{
test: (v) => v.length >= 2,
message: 'Tag must be at least 2 characters'
}
]}
transform={(v) => v.toLowerCase()}
/>
</Chipster>
)
}

Keyboard Navigation

Both modes support full keyboard navigation:

• ← →: Navigate between items
• Backspace: Delete focused item
• Enter: Add item (in free mode) or select suggestion
• ↑ ↓: Navigate through suggestions
• Escape: Clear focus/selection

Important Notes

• Mode cannot be changed after initialization
• Suggestions are required in suggestions-only mode
• Validation works in both modes
• Keyboard navigation is consistent across modes
• Focus management handles both input and item selection
• Transform functions apply in both modes