Check Group & Radio Group

3 mins to create a complex checkbox group - Case 1

3 mins to create a complex checkbox group - Case 1

Introduction

Check Group is a checkbox & radio group alike Higher Order Component, provding a group of options to choose from. It's capable of self state management. You don't need to write any code to handle the UI state, such as which option is checked and which is not.

Check Group has the following wrapped widgets:

• Container (x1): configures the background of the HoC
• Checkbox image (x1): configures image for check & unchecked state
• Images (x2): configure images for the options
• Checkbox label (x1): configures the text for checked & unchecked state, e.g. you might want the checked option to have specific font or color.
• Labels (x2): configures the text for the options

Check Group has the following properties:

• Options

  Configure how many options the HoC has, and each options has:

  • 3 configurable images at max
  • 3 configurable labels at max

• Current selection

  The current selection of the HoC. You can configure it for the initial state.

• Direction

  Configure the direction of the HoC to be horizontal or vertical.

• Multiple (Check mode or Radio mode)

  Whether the HoC allows multiple selection or not. So, if you configure Multiple to true, you have a checkbox group, otherwise, it's a radio group.

• Interval

  Configure the distance between the options.

Checkbox Image & Label

There's a specific image and label for checked and unchecked state.

• Image

  Configure the image for checked. If it's not configured, it will use default one or NULL if you didn't configure a default.

  The case that you didn't configure a default image is probably you don't need it, so just hide it. See use case 2 in above video.

• Label

  Configure the text style for checked and unchecked state, e.g. set text color, font when the option is checked. If it's not configured, it will use default style of the label.