Matterway
    Preparing search index...

    Function badgeField

    • BadgeField component for multi-select badges.

      Parameters

      • props: UiBadgeFieldProps

        Configuration object

        • name

          Name of the field in the state

        • label

          Label for the field

        • items

          Array of badge items to display, or a function that returns the items based on state

        • bgColor

          Global background color for all badges. Can be a static string or a function that returns a color based on state

        • color

          Global text color for all badges. Can be a static string or a function that returns a color based on state

        • required

          Whether the field is required

        • disabled

          Whether the field is disabled

        • hidden

          Whether the field is hidden

        • defaultValue

          Array of default selected values

        • onChange

          Callback function called when selection changes

        • wrap

          Global wrap setting for all badges. Defaults to false. Can be a static boolean or a function that returns a boolean based on state. Individual badge items can override this

      Returns Element

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

    Settings