Function: checkboxList()

function checkboxList(props: UiCheckboxListFieldProps): Element;

Defined in: src/UI/blocks/checkboxList.tsx:84

Checkbox list component for multiple selection from multiple options.

Parameters

Parameter	Type	Description
props	UiCheckboxListFieldProps	Configuration object

Returns

Element

Examples

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