Function checkboxList

  • checkboxList(props): Element

  • Creates a checkbox list component for multiple selection from multiple options.

    Parameters

    • props: UiCheckboxListFieldProps

      Configuration object

    Returns Element

    A JSX element representing the checkbox list component

    Example

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

    Example

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

    Example

    Usage with global state

    checkboxList({
      name: 'availableFeatures',
      label: 'Available Features',
      items: async (state) =>
        state.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