Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Chips

Chips allow users to enter information, make selections, filter content, or trigger actions.

banner-Chips
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

Upcoming

Chips allow users to enter information, make selections, filter content, or trigger actions.

While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.

chips usage

Variants

Legion has two theme variants of chips :

  1. Primary
  2. Secondary

and also have two size variant of chips :

  1. Large
  2. Small

Usage

Primary

Static in xml

<com.telkom.legion.component.chips.large.LgnPrimaryLargeChipGroup
// define your attribute's here
... />

programmatically

...
LgnPrimaryLargeChipGroup(requiredContext()).apply {
//Your View's customization here
}
...

Secondary

Static in xml

<com.telkom.legion.component.chips.large.LgnSecondaryLargeChipGroup
// define your attribute's here
... />

programmatically

...
LgnSecondaryLargeChipGroup(requiredContext()).apply {
//Your View's customization here
}
...

Large

Static in xml

<com.telkom.legion.component.chips.large.LgnPrimaryLargeChipGroup
// define your attribute's here
... />

programmatically

...
LgnPrimaryLargeChipGroup(requiredContext()).apply {
//Your View's customization here
}
...

Small

Static in xml

<com.telkom.legion.component.chips.large.LgnSecondarySmallChipGroup
// define your attribute's here
... />

programmatically

...
LgnSecondarySmallChipGroup(requiredContext()).apply {
//Your View's customization here
}
...

Attributes

Attribute NameXml AttrsRelated method(s)Description
TextN/AtextTo get or set selection value on Filter Type directly
Hintandroid:hinthintTo set label value directly via xml
Enable Status [WIP]N/AN/ATo set enable or disable chips 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
Chip Typeapp:chipTypechipTypeTo set chip type directly via xml
Single Lineapp:isSingleLineisSingleLineTo set chips single line directly via xml
Show Close Iconapp:closeIconVisiblecloseIconVisibleTo set show close icon on chips directly via xml
Single Selection [BETA]app:isSingleSelectionisSingleSelectionTo set chips single selection directly via xml
Background Color [BETA]app:chipBackgroundColorchipBackgroundColorTo set chips background color directly via xml
Stroke Color [BETA]app:chipStrokeColorchipStrokeColorTo set chips stroke color directly via xml
Text Color [BETA]android:textColortextColorsTo set chips text color directly via xml
Add ChipsN/AaddAll(List<String>)To add chips programaticaly
Add ListenerN/AsetListener { text -> }To add listener on chips programaticaly
Add Close ListenerN/AsetOnCloseIconClickListener { text -> }To add close listener on chips programaticaly