Matterway
    Preparing search index...

    Function checkboxList

    • Checkbox list component for multiple selection from multiple options.

      Parameters

      • props: UiCheckboxListFieldProps

        Configuration object

        • name

          Name of the component

        • label

          Label text

        • items

          Array of option texts or a function that receives params with data and value, returning a promise of options. Selection is driven via items by setting checked boolean per item

        • selectAll

          If true, adds a select all checkbox to the left of the label. The label becomes clickable to toggle select all.

        • required

          If true, the field is required

        • disabled

          If true, the field is disabled

        • invalid

          If false/undefined the field is valid. If a string is provided, it will be used as the validation message

      Returns Element

      Basic usage with required props

      checkboxList({
        name: 'interests',
        label: 'Interests',
        items: [
          { value: 'sports', label: 'Sports', description: 'Sports description' },
          { value: 'music', label: 'Music', description: 'Music description' },
          { value: 'reading', label: 'Reading', description: 'Reading description' }
        ]
      });

      Usage with select all checkbox

      checkboxList({
        name: 'permissions',
        label: 'Permissions',
        selectAll: true,
        items: [
          { value: 'read', label: 'Read Access', description: 'View data' },
          { value: 'write', label: 'Write Access', description: 'Modify data' },
          { value: 'delete', label: 'Delete Access', description: 'Remove data' }
        ]
      });

      Usage with initial checked items

      checkboxList({
        name: 'preferredFeatures',
        label: 'Preferred Features',
        items: [
          { value: 'darkMode', label: 'Dark Mode', checked: true, description: 'Dark Mode description' },
          { value: 'notifications', label: 'Notifications', checked: true, description: 'Notifications description' },
          { value: 'analytics', label: 'Analytics', description: 'Analytics description' }
        ],
        required: true,
        disabled: false
      });

      Usage with dynamic items depending on other fields

      checkboxList({
        name: 'availableFeatures',
        label: 'Available Features',
        items: async ({data}) =>
          data.userType === 'premium'
            ? [
                { value: 'advanced', label: 'Advanced Features', description: 'Advanced Features description' },
                { value: 'priority', label: 'Priority Support', description: 'Priority Support description' }
              ]
            : [
                { value: 'basic', label: 'Basic Features', description: 'Basic Features description' },
                { value: 'standard', label: 'Standard Support', description: 'Standard Support description' }
              ],
      });

    Settings