Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Checkbox

Allow users to select and deselect items in bulk

banner-Checkbox
Component Status Details

Status component contains a list of checks and completeness that has been tested and owned by each component

check-list-icon We don't use color as the only visual tool to convey information.
check-list-icon The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.check-list-icon The title is the component name that uses the frame base component template.check-list-icon The base component name contains: .Base & "Component Name" if there is more than one.check-list-icon All component properties use the Legion foundation.
check-list-icon We can change all the parts that are connected to the component base.check-list-icon The inside of the base component remains connected to the master component.check-list-icon All variant options are not damaged when we change from one to another.check-list-icon Overriding changes to components will not reset other variants.
check-list-icon Component's already has component specs documentation.

Status

Resources

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

Usage

The following is how to implement Checkbox component in Legion :

Base Components

The basic checkbox component is used for individual checkboxes or basic checkbox needs.

To implement basic CheckBox we use this tag LgnPrimaryCheckBox or LgnSecondaryCheckBox .

The following is usage to implement LgnPrimaryCheckBox

<com.telkom.legion.component.checkbox.LgnPrimaryCheckBox
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="@dimen/dimen_16dp"
    android:layout_marginTop="@dimen/dimen_16dp"
    android:text="Sample Checkbox" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnPrimaryCheckBox(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

The following is usage to implement LgnSecondaryCheckBox

<com.telkom.legion.component.checkbox.LgnSecondaryCheckBox
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="@dimen/dimen_16dp"
    android:layout_marginTop="@dimen/dimen_16dp"
    android:text="Sample Checkbox" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnSecondaryCheckBox(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

Checkbox Group

Components for grouping checkboxes, to make it easier if you need checkbox options on your form.

To implement basic CheckBox we use this tag LgnPrimaryCheckBoxGroup or LgnSecondaryCheckBoxGroup .

The following is usage to implement LgnPrimaryCheckBoxGroup

Static in xml

<com.telkom.legion.component.checkbox.LgnPrimaryCheckBoxGroup
    android:id="@+id/cgSample"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:showDividers="middle" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnPrimaryCheckBoxGroup(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

The following is usage to implement LgnSecondaryCheckBoxGroup

Static in xml

<com.telkom.legion.component.checkbox.LgnSecondaryCheckBoxGroup
  android:id="@+id/cgSample2"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:showDividers="middle" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnSecondaryCheckBoxGroup(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

Checkbox Container

Container component containing checkbox groups and labels, helper and error text, this is used for consistency if you combine text fields in a form.

To implement basic CheckBox we use this tag LgnPrimaryCheckBoxContainer or LgnSecondaryCheckBoxContainer .

The following is usage to implement LgnPrimaryCheckBoxContainer

Static in xml

<com.telkom.legion.component.checkbox.LgnPrimaryCheckBoxContainer
  android:id="@+id/cgcSample"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:hint="CheckBox Container"
  android:showDividers="middle"
  app:helperText="Ini CheckBox" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnPrimaryCheckBoxContainer(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

The following is usage to implement LgnSecondaryCheckBoxContainer

Static in xml

<com.telkom.legion.component.checkbox.LgnSecondaryCheckBoxContainer
  android:id="@+id/cgcSample2"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:hint="CheckBox Container"
  android:showDividers="middle"
  app:helperText="Ini CheckBox" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnSecondaryCheckBoxContainer(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

Variants

Primary Color Checkbox

Secondary Color Checkbox

Primary Color Checkbox Group

Secondary Color Checkbox Group

Primary Color Checkbox Container

Secondary Color Checkbox Container

Attributes

Base Components Attributes

Attribute NameXml AttrsRelated method(s)Description
Textandroid:texttextTo set Text value directly via xml
Enable Statusandroid:enabledisEnableTo set enable or disable button directly via xml

CheckBox Group Attributes

Attribute NameXml AttrsRelated method(s)Description
Show Dividerandroid:showDividerssetShowDividersTo show dividers between checkbox directly via xml
Add CheckboxN/AaddAll(List<String>)To add checkbox programaticaly
Clear CheckboxN/Aclear()To clear all checkbox programaticaly
Checked StateN/AisCheckedTo check checkbox ischecked or not
Checked All StateN/AisCheckedAllTo check checkbox is checked all or not, and you can set all checkbox in combo box group to checked
Get and Set Checked ValueN/AtextTo get checked value from combo box or To set checked combo box, checkbox group can automaticaly find right combo box with given value and set to checked
Add Checked ListenerN/AsetOnCheckedChangeListenerTo add checked listener on checkbox

CheckBox Container Attributes

Attribute NameXml AttrsRelated method(s)Description
Textandroid:texttextTo set Text value directly via xml
Hintandroid:hinttextTo set Hint or Label value directly via xml
Required Statusapp:isRequiredisRequiredTo set required status on text area directly via xml
Optional Statusapp:isOptionalisOptionalTo set optional status on text area directly via xml
Helper textapp:helperTexthelperTo set helper text directly via xml
Error textN/AerrorTo set error text
Show Dividerandroid:showDividerssetShowDividersTo show dividers between checkbox directly via xml
Add CheckboxN/AaddAll(List<String>)To add checkbox programaticaly
Clear CheckboxN/Aclear()To clear all checkbox programaticaly
Checked StateN/AisCheckedTo check checkbox ischecked or not
Checked All StateN/AisCheckedAllTo check checkbox is checked all or not, and you can set all checkbox in combo box group to checked
Get and Set Checked ValueN/AtextTo get checked value from combo box or To set checked combo box, checkbox group can automaticaly find right combo box with given value and set to checked
Add Checked ListenerN/AsetOnCheckedChangeListenerTo add checked listener on checkbox