Function badgeField

  • badgeField(props): Element

  • Creates a BadgeField (multi-select badges) form component.

    Parameters

    • props: UiBadgeFieldProps

      Configuration object for the badge field component

    Returns Element

    A JSX element representing the badge field component

    Example

    Basic multi-select badge field

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

    Example

    Badge field with global colors

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

    Example

    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' }
      ]
    });

    Example

    Dynamic colors based on state

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

    Example

    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' }
      ]
    });

Settings