ChipsField

ChipsField wraps the PrimeReact Chips component for collecting multiple text values in a single field.

Usage

import { CommandDialog } from '@cratis/components/CommandDialog';
import { ChipsField } from '@cratis/components/CommandForm';

<CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
    <ChipsField<MyCommand>
        value={c => c.tags}
        placeholder="Add tags and press Enter"
        separator=","
        addOnBlur
    />
</CommandDialog>

Props

Prop	Type	Default	Description
value	(instance: TCommand) => unknown	-	Required. Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety.
placeholder	string	-	Advisory text shown when no chip values exist.
max	number	-	Maximum number of chips allowed.
separator	string	-	Adds a chip when the separator character is typed.
addOnBlur	boolean	false	Adds the current input as a chip when the field loses focus.
allowDuplicate	boolean	true	Controls whether duplicate chip values are allowed.

Behavior

• Default value is an empty array.
• The field spans full width within its container.
• Validation state is reflected via the PrimeReact invalid flag.