Display a group of checkboxes to select or unselect independent options from a list and enable you to add, remove, and edit options to keep track of items that should be completed.
- Show a list of options you can select or unselect
- Enable you to edit the checklist to add, remove, and edit the checklist options
This release introduces a major upgrade to the Checklist component, focusing on usability, flexibility, accessibility, and configurability. The update includes a redesigned UI, new interaction patterns, improved editing capabilities, link support enhancements, and expanded configuration options through UIB.
1. New Features
1.1 Empty State
- Brand-new empty state UI for checklists with:
- Title and description support.
- Entry point for adding the first checklist item.
- Three-dot action menu with Delete All functionality
1.2 Three-Dot Menu
- Added contextual menu for global checklist actions.
- Options included :
- Delete all items
1.3 Inline Editing
- Users can edit checklist items directly inline via:
- Hover → Click edit icon
- Double-click on item text
- Required-field option adds an asterisk when enabled.
- Changes applied on Apply; discarded on Cancel.
1.4 Text Wrapping
- Longer checklist items wrap automatically based on container width.
- Ensures full readability without truncation.
1.5 Inline Link Controls
- Checklist items now support embedded links (configurable; enabled by default).
- On hover, users can:
- Edit link
- Delete link
- "Add Link" button leads directly to inline edit mode with link text.
1.6 Item Reordering
- Checklist items support drag-and-drop reordering.
- Feature is configurable.
- Sequence prefix updates dynamically after reordering.
1.7 Sequence Prefix
- Users can enable numeric or alphabetic prefixes on list items.
- Automatically maintains correct order after reordering.
1.8 Checklist Description
- Component now supports an optional description field above the checklist.
2. UI & Interaction Enhancements
2.1 Hover Controls
- Edit and Delete icons appear on hover.
- If “Invisible Controls” preference is enabled:
- Icons remain permanently visible for ease of use.
2.2 Updated Visual Styling
- Refreshed UI for empty and populated checklists for improved clarity and consistency.
2.3 Edit Mode Behaviour
- Disabled, read-only, and invalid fields display as-is while editing.
- All configuration states continue to be respected.
3. Keyboard Accessibility Updates
3.1 Drag Handle Focus
- Focus on drag-and-drop handle reveals Edit/Delete icons.
- Users can navigate to icons and perform actions using Enter.
3.2 Keyboard Editing Support
- Enter or Tab + Enter triggers inline editing mode.
- Fully accessible interaction flow for keyboard-only users.
4. New UIB Elements & Configuration Options
4.1 Component Visibility
- Checklist component visibility can be toggled through UIB.
4.2 Checklist Configuration Options
- Empty state configuration:
- Empty state title
- Empty state description
- Font size customization for checklist items.
- Prefix configuration:
- Number
- Alphabet
- Loading spinner toggle during checklist render.
- Configure checklist item objects:
- State, labels, validations, etc.
4.3 Edit Mode Configuration
- Allow or restrict user editing of checklist items.
- Configure available edit options (required flag, delete, etc.).
- Disable link embedding if needed.
- Option to open item links in a new browser tab/window.
Summary of Improvements
This release modernizes the Checklist component with:
- A cleaner, more intuitive UI
- Powerful inline editing
- Enhanced link management
- Better accessibility & keyboard usage
- Comprehensive configurability via UIB
- Flexible visuals, ordering, and metadata
These changes provide a more robust, customizable, and user-friendly checklist experience for all users.
- Xanadu instance (26.x.x) with UI Builder