Introduction
The Check Group is a Higher Order Component that provides checkbox and radio group functionality with self-managed state control. This component eliminates the need for custom code to handle UI states such as tracking checked options.
Component Structure
The Check Group encapsulates the following components:
- Container (x1): Configures the background for the HoC
- Checkbox image (x1): Configures images for checked and unchecked states
- Images (x2): Configure images for the options
- Checkbox label (x1): Configures text for checked and unchecked states, allowing custom fonts or colors for checked options
- Labels (x2): Configures text for the options
Properties
The Check Group provides the following configurable properties:
Options Configure the number of options for the HoC, with each option supporting:
- Up to 3 configurable images
- Up to 3 configurable labels
Current Selection Defines the initial state of the HoC.
Direction Configures the layout direction as either horizontal or vertical.
Multiple Selection Mode Determines whether multiple selections are allowed:
- Enabled: Checkbox group behavior
- Disabled: Radio group behavior
Interval Configures the spacing between options.
Checkbox Image & Label
Dedicated images and labels are provided for checked and unchecked states.
Image
Configure the image for the checked state. If not configured, the component will use a default image or NULL if no default is specified.
When no default image is configured, it typically indicates the image is not needed and should be hidden.
Label
Configure text styling for checked and unchecked states, such as text color and font when an option is selected. If not configured, the component will use the default label style.