Chips

Molecule

Compact elements that represent an attribute or action depending on the type of Chips used. They display information in a pill-shaped container. They allow users to make selections or perform actions. They are dynamic elements that can change size, content and state depending on other events and can appear in groups. A Chip can consist of a text element, an icon and a text, only icon. It is important to keep Chips compact and represent a discrete information. They should have a clear and helpful relationship with the content or task they represent.

By clicking on the Chip user selects it (converts to Chosen) or activates the corresponding function. Clicking on the other Chip unselects the previously selected one. Chips appear as part of a series of other Chips. They are typically displayed horizontally and sequentially. In case of having Chips that can not be wrapped in one row, we should be cautious because having more than one row might be harder to scan.

Playground

Option 1

Icon

Noneadd_home_workadd_layeradd_linkadd_useraialertangleapplyappsapps_arrowarrows_outwardattachmentattic_wallavataraxesbackbugcalendarcheckcheck_filledchecklistchevron_downchevron_leftchevron_rightchevron_upcircleclosecloud_uploadcollapsecolumnsconstructioncoordinatescubecube_groupcustom_geometrydoordouble_chevron_downdouble_chevron_leftdouble_chevron_rightdouble_chevron_updownloaddownwardduplicatedusterdwgeditelement_core_layerelement_inside_layerelement_insulationelement_outside_layererrorexcelexpand_1expand_2export_fileseyeeye_hiddenfibernox_logofibernox_no_tipfilefilterfilter_dropdownfilter_dropdown_messagefilter_removefolderforwardgearhelphidden_layerhomehome_workimage_arrow_upinfojva_fjva_nlanguagelayerlayoutlink_offlistlistsloadslockedloginlogoutmailmenuminusmore_optionsmultiple_layersnew_tabno_split_scenenotificationnotification_updateopeningoutputpluspohlcon_logopreviewquestionrectangleredoreloadremove_userrowsrulersandwich_core_layersandwich_insulationsandwich_outside_layersavescreen_with_appsscreen_with_downloadscreen_with_gearscreen_with_webscrollsearchsearch_layersearch_usersendsloped_side_wall_leftsloped_side_wall_rightsplit_scenestandard_wallstar_shinestar_usersumswatchswatch_alertsyncticktrashundounlockeduploadupwarduservillavilla_addvilla_infowindowzoom_inzoom_out

Text

Disabled

---

Option 2

Icon

Noneadd_home_workadd_layeradd_linkadd_useraialertangleapplyappsapps_arrowarrows_outwardattachmentattic_wallavataraxesbackbugcalendarcheckcheck_filledchecklistchevron_downchevron_leftchevron_rightchevron_upcircleclosecloud_uploadcollapsecolumnsconstructioncoordinatescubecube_groupcustom_geometrydoordouble_chevron_downdouble_chevron_leftdouble_chevron_rightdouble_chevron_updownloaddownwardduplicatedusterdwgeditelement_core_layerelement_inside_layerelement_insulationelement_outside_layererrorexcelexpand_1expand_2export_fileseyeeye_hiddenfibernox_logofibernox_no_tipfilefilterfilter_dropdownfilter_dropdown_messagefilter_removefolderforwardgearhelphidden_layerhomehome_workimage_arrow_upinfojva_fjva_nlanguagelayerlayoutlink_offlistlistsloadslockedloginlogoutmailmenuminusmore_optionsmultiple_layersnew_tabno_split_scenenotificationnotification_updateopeningoutputpluspohlcon_logopreviewquestionrectangleredoreloadremove_userrowsrulersandwich_core_layersandwich_insulationsandwich_outside_layersavescreen_with_appsscreen_with_downloadscreen_with_gearscreen_with_webscrollsearchsearch_layersearch_usersendsloped_side_wall_leftsloped_side_wall_rightsplit_scenestandard_wallstar_shinestar_usersumswatchswatch_alertsyncticktrashundounlockeduploadupwarduservillavilla_addvilla_infowindowzoom_inzoom_out

Text

Disabled

Option 1

Option 2

        
          

            <
            Chips

            





            

                text
              
                =
                "Option 1"
              

                category
              
                =
                "choice"
              

                id
              
                =
                "1"
              



  />

Anatomy

• Container - holds all chip elements, and its width is determined by those elements.
• Icon - is an optional element. It can be an icon, logo, etc. It helps users identify an entity or supplement the information on the text and decrease cognitive load for the user. Leading icon can either represent the filtering action (with a filtering icon) or the attribute-value they are filtering (e.g. palette icon to represent color filtering). They can also represent a chosen value, for example using a checkmark.
• Text - can be an entity name, description, tag, action or any other information provider for the user.

Properties

NOTE

Categories input and filter are deprecated in upcoming releases.
Please use 'choice' instead.

export type ChipsCategory = 'choice' | 'filter' | 'input';  // input and filter are to be deprecated

export type ChipsProps<C extends ChipsCategory> =
  & ElementProps
  & {
    chosen?: C extends 'choice'
    ? boolean
    : never;
    text?: string | number;
    category?: ChipsCategory;
    icon?: IconName;
    disabled?: boolean;
    error?: boolean;
  };

States

Default, Hover, Pressed, Focus and Locked

Chosen

When clicked, Chip becomes Chosen.

Variants

Icon

Show or hide an Icon

Text

Show or hide text

Developer notes

NOTE

Select Event (@select): Triggered when the user clicks on the chip text.

Delete Event (@delete): Triggered when the user clicks on the delete button (IconButtonCompact).