Function: badgeField()

function badgeField(props: UiBadgeFieldProps): Element;

Defined in: src/UI/blocks/badgeField.tsx:102

BadgeField component for multi-select badges.

Parameters

Parameter	Type	Description
props	UiBadgeFieldProps	Configuration object

Returns

Element

Examples

Basic multi-select badge field

badgeField({
  name: 'skills',
  label: 'Select Skills',
  items: [
    { label: 'JavaScript', value: 'js' },
    { label: 'TypeScript', value: 'ts' },
    { label: 'React', value: 'react' }
  ]
});

Badge field with global colors

badgeField({
  name: 'categories',
  label: 'Select Categories',
  items: [
    { label: 'Work', value: 'work' },
    { label: 'Personal', value: 'personal' }
  ],
  bgColor: '#e5e7eb',
  color: '#374151'
});

Badge field with individual item colors

badgeField({
  name: 'priorities',
  label: 'Select Priorities',
  items: [
    { label: 'High', value: 'high', bgColor: '#dc2626', color: '#ffffff' },
    { label: 'Medium', value: 'medium', bgColor: '#f59e0b', color: '#ffffff' },
    { label: 'Low', value: 'low', bgColor: '#10b981', color: '#ffffff' }
  ]
});

Dynamic colors based on params with data and value

badgeField({
  name: 'tags',
  label: 'Select Tags',
  items: ({data}) => data.availableTags || [],
  bgColor: ({data}) => data.theme === 'dark' ? '#374151' : '#f3f4f6',
  color: ({data}) => data.theme === 'dark' ? '#ffffff' : '#111827'
});

Badge field with global wrap setting and individual item overrides

badgeField({
  name: 'descriptions',
  label: 'Select Descriptions',
  wrap: true, // Global wrap setting
  items: [
    { label: 'Short', value: 'short', wrap: false }, // Override: no wrap
    { label: 'This is a very long description that will wrap by default', value: 'long' },
    { label: 'Another long text that benefits from wrapping', value: 'another-long' }
  ]
});