When designing tables for onboarding processes in iOS SDK and Web2App, understanding the customization options for item states is crucial.

These settings allow you to define how each item in the table appears before and after user selection, enhancing user interaction and experience.

Here's a breakdown of these settings:

Screen Added on flow

Click on the screen you've added to the onboarding flow.

Press the Pencil button to enter the "Edit Screen" mode.

Unselected Item State: Customization for the default appearance of each item before user interaction. Options for background color, border width, border color, and border radius allow for distinct visual differentiation from the selected state.

Selected Item State: Customization for how an item appears when a user selects it.

Background Color: Determines the item's background. If the checkbox is unchecked, the background is transparent. Activating this option allows you to choose a color from the palette or use a pipette tool for precision.

Border Width: Sets the thickness of the item's border. Increasing the value thickens the border while decreasing it makes it thinner. Ensure both the "Border-width" and "Border-color" checkboxes are checked for the border to be visible.

Border Color: Alters the color of the border. You can select a hue from the color palette or input a specific HEX color code.

Border Radius: Modifies the curvature of the item's corners. Increasing the value creates rounder corners, and decreasing it results in squarer corners. This setting is applicable even if the "Border Width" is disabled.

Table Single Selection and 2-Column Single Selection: For iOS SDK and Web2App, users won't see the 'selected' state for these table types. The settings for 'Unselected Item State' apply by default.

Table Multiple Selection: Users can see both 'Unselected' and 'Selected' states, allowing for dynamic visual feedback based on their selections.

This screen type doesn't have a 'Selected State'; hence, its setting is named 'Item State'. Customization options are similar to those mentioned above but apply uniformly as there is no differentiation between selected and unselected states.

Any adjustments made are uniformly applied to all items in the table. When new items are added, they inherit the same settings, ensuring a consistent look and feel across the table

By effectively utilizing these customization options, you can create intuitive and visually appealing tables that enhance the onboarding experience. Whether it’s a single-selection table where the focus is on one choice or a multiple-selection table that encourages various combinations, these settings allow for a high degree of personalization to match the app's design and usability goals.