Checkbox

You have to go through a three-step form wizard to enable this Control, i.e., Design, Validation & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Checkbox” control form wizard. Here you are required to fill in the following details:

  1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Label Name: Specifies the display name or title for a field or control in the user interface.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  4. Placeholder: Defines the hint text displayed inside a form field or input box when it is empty, providing guidance on the expected input.
  5. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
    1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon.
    2. Select Tooltip Position: Select tooltip position from the following Top, Right, Bottom or Left
  6. isDefault UI: A property that specifies whether the default user interface layout or styling should be applied to the control, ensuring consistency with the application's standard design.

2nd Step – Validation

  1. Use Custom Value?: Values are set as True or False for this Control by default. But you can put any custom Values.
  2. Hide Switch Text?: With this property, you can hide the text from the switch.
  3. Use Custom Text?: Text is set as Yes or No for this Control by default. But you can put any custom Text.
  4. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
    1. Error Message: Here, you can define the error message that will be displayed if this control is left blank.
  5. Default Value: As the name suggests, it defines a default value for a field. This default value can be changed by user input.

3rd Step – Advance

  1. Design
    1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    2. Description: Enter extra suggestions for user experience on this field
  2. Mobile
    1. Switch or Icon right side?: A property that specifies whether the switch or icon should be aligned to the right side of the control.
    2. Padding Left: Adjusts the amount of space between the left edge of the control and its content.
    3. Padding Top: Adjusts the amount of space between the top edge of the control and its content.
    4. Padding Right: Adjusts the amount of space between the right edge of the control and its content.
    5. Padding Bottom: Adjusts the amount of space between the bottom edge of the control and its content.
    6. Align Self: Defines the alignment of a specific item within a flex container, allowing it to override the container's default alignment rules.
    7. Flex: Specifies how a flex item will grow, shrink, or maintain its size within a flex container, determining its proportion relative to other items.
    8. Form Control Margin Bottom: Defines the spacing below a form control element, allowing customization of the vertical gap between controls for better layout and design consistency.
    9. Text Color: Specifies the color of the text displayed within the control.
    10. Font Size: Defines the size of the text in the control, ensuring proper visibility and readability.
    11. Line height: Specifies the vertical spacing between lines of text, affecting the overall text layout.
    12. Gap between Icon and Text: Adjusts the spacing between the icon and the accompanying text within the control.
    13. Is Bold?: A property that determines whether the text should be displayed in bold font weight.

Click “Confirm” and “Checkbox” control is configured.