allowDuplicates

The allowDuplicates prop controls whether Chipster allows duplicate items to be added. When set to false, attempts to add duplicate items will trigger a validation error.

Type Definition

type AllowDuplicatesProps = boolean;

Basic Usage

BasicExample.tsx

import { Chipster } from '@micoblanc/chipster'
 
export default function BasicExample() {
  return (
    <Chipster>
      <Chipster.ItemList />
      <Chipster.Input placeholder="Add tags..." />
      <Chipster.Validation 
        allowDuplicates={false}
      />
    </Chipster>
  )
}

With Custom Error Message

CustomErrorExample.tsx

export default function CustomErrorExample() {
  const handleError = (error: string) => {
    toast.error(error)
  }
 
  return (
    <Chipster>
      <Chipster.ItemList />
      <Chipster.Input placeholder="Add unique emails..." />
      <Chipster.Validation 
        allowDuplicates={false}
        onError={handleError}
        validationRules={[
          {
            test: (value) => !value.includes('@'),
            message: 'This email is already in the list'
          }
        ]}
      />
    </Chipster>
  )
}

With Suggestions

SuggestionsExample.tsx

export default function SuggestionsExample() {
  const getSuggestions = (input: string) => {
    const allTags = ['React', 'Vue', 'Angular', 'Svelte']
    // Suggestions are automatically filtered for duplicates
    // when allowDuplicates is false
    return allTags.filter(tag => 
      tag.toLowerCase().includes(input.toLowerCase())
    )
  }
 
  return (
    <Chipster>
      <Chipster.ItemList />
      <Chipster.Input placeholder="Search frameworks..." />
      <Chipster.Suggestions getSuggestions={getSuggestions} />
      <Chipster.Validation 
        allowDuplicates={false}
        errorClassName="!text-orange-500"
      />
    </Chipster>
  )
}

With Case-Insensitive Comparison

CaseInsensitiveExample.tsx

export default function CaseInsensitiveExample() {
  return (
    <Chipster>
      <Chipster.ItemList />
      <Chipster.Input placeholder="Add tags..." />
      <Chipster.Validation 
        allowDuplicates={false}
        transform={(value) => value.toLowerCase().trim()}
        // This will treat "React" and "react" as duplicates
      />
    </Chipster>
  )
}

Important Notes

Default value is true
Affects both manual input and suggestion selection
Case-sensitive by default (use transform for case-insensitive)
Works with transformed values
Duplicate check happens after transformation
Suggestions are automatically filtered for duplicates
Error message can be customized via onError
Validation occurs before item addition

Common Use Cases

Email lists
Unique identifiers
Tag systems
Category selection
User assignments
Filter lists
Metadata tags
Unique references

With Custom Duplicate Detection

CustomDuplicateExample.tsx

export default function CustomDuplicateExample() {
  // Custom normalization for duplicate detection
  const normalizeValue = (value: string) => {
    return value
      .toLowerCase()
      .trim()
      .replace(/[^a-z0-9]/g, '') // Remove special characters
  }
 
  return (
    <Chipster>
      <Chipster.ItemList />
      <Chipster.Input placeholder="Add tags..." />
      <Chipster.Validation 
        allowDuplicates={false}
        transform={normalizeValue}
        // This will treat "react.js", "ReactJS", and "react-js" as duplicates
      />
    </Chipster>
  )
}

maxItems transform