Chips

React Bootstrap 5 Chips component

Responsive chips built with Bootstrap 5, React 18 and Material Design 2.0. Chips (aka tags) make it easier to categorize content and browse ie. through different articles from the same category.

Bootstrap tags and chips categorize content with the use of text and icons. Tags and chips make it easier to browse throughout articles, comments or pages. Their main goal is to provide your visitors with an intuitive way of getting what they want. Just consider, how convenient it is to find all the articles related to web development just by using a tag.

Note: Read the API tab to find all available options and advanced customization

Basic example

Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.

Text
Contact Person John Doe
Contact Person John Doe
Contact Person John Doe 
        
            
            import React from 'react';
            import { MDBChip } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBChip>Text</MDBChip>
                  <MDBChip closeIcon>
                    <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp' alt='Contact Person' />
                    John Doe
                  </MDBChip>
                  <MDBChip closeIcon size='md'>
                    <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp' alt='Contact Person' />
                    John Doe
                  </MDBChip>
                  <MDBChip closeIcon size='lg'>
                    <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp' alt='Contact Person' />
                    John Doe
                  </MDBChip>
                </>
              );
            }

Outline

You can use outline styling with adding color property to your chip.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark 
        
            
            import React from 'react';
            import { MDBChip } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBChip closeIcon color='primary'>
                    Primary
                  </MDBChip>
                  <MDBChip closeIcon color='secondary'>
                    Secondary
                  </MDBChip>
                  <MDBChip closeIcon color='success'>
                    Success
                  </MDBChip>
                  <MDBChip closeIcon color='danger'>
                    Danger
                  </MDBChip>
                  <MDBChip closeIcon color='warning'>
                    Warning
                  </MDBChip>
                  <MDBChip closeIcon color='info'>
                    Info
                  </MDBChip>
                  <MDBChip className='text-dark' closeIcon color='light'>
                    Light
                  </MDBChip>
                  <MDBChip closeIcon color='dark'>
                    Dark
                  </MDBChip>    
                </>
              );
            }

Placeholder

Type a name and press enter to add a tag. Click X to remove it.

        
            
          import React from 'react';
          import { MDBChipsInput } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBChipsInput label='Example label' />
            );
          }

Initial Value

You can set initial tags with initialValue property.

        
            
            import React from 'react';
            import { MDBChipsInput } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBChipsInput
                  label='Example label'
                  editable
                  initialValues={[
                    { tag: 'MDBReact' },
                    { tag: 'MDBAngular' },
                    { tag: 'MDBVue' },
                    { tag: 'MDB5' },
                    { tag: 'MDB' },
                  ]}
                />  
              );
            }

Content Editable

You can set the content editable to add options using editable property. 

        
            
            import React from 'react';
            import { MDBChipsInput } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBChipsInput label='Example label' editable /> 
              );
            }

Chips - API

Import

        
            
            import { MDBChip, MDBChipsInput } from 'mdb-react-ui-kit';

Properties

MDBChip

Name Type Default Description Example
chipRef React.RefObject undefined Reference to MDBChip element <MDBChip chipRef={chipReference} />
closeIcon Boolean false Adds a close icon to the chip <MDBChip closeIcon />
color String '' Sets the outline color of the chip <MDBChip color='secondary' />
size String '' Defines a size of the chip <MDBChip size='md' />
tag String 'div' Defines tag of the MDBChip element <MDBBadge tag="section" />

MDBChipsInput

Name Type Default Description Example
editable Boolean Enables chips editing after double click <MDBChipsInput editable id="inputExample" />
id String '' Defines an id for the MDBChipsInput <MDBChipsInput id="inputExample" />
initialValues Array [] Allows to define some default chips <MDBChipsInput initialValues={[ { tag: 'Test' } ]} id="inputExample" />
inputRef Reference '' A reference to the input element <MDBChipsInput label="Example label" labelId="exampleLabel" inputRef={someRef} id="inputExample" />
label String '' Defines a label text for the MDBChipsInput <MDBChipsInput label="Example label" id="inputExample" />
labelClass String '' Adds custom classes to the label <MDBChipsInput label="Example label" labelId="exampleLabel" labelClass="test-class" id="inputExample" />
labelId String '' Defines an id for the label <MDBChipsInput label="Example label" labelId="exampleLabel" id="inputExample" />
labelStyle Object '' Adds custom styles to the label <MDBChipsInput label="Example label" labelId="exampleLabel" labelStyle={{ color: 'red' }} id="inputExample" />
labelRef Reference '' A reference to the label element <MDBChipsInput label="Example label" labelId="exampleLabel" labelRef={someRef} id="inputExample" />
readonly String '' Makes the MDBChipsInput read only <MDBChipsInput readonly id="inputExample" />
value String '' Set init value of MDBChipsInput <MDBChipsInput value="example"/>

Events

MDBChip

Name Type Description
onDelete (name?: React.ReactNode) => any This event fires start if you click delete button/backspace in the chips-placeholder or chips-initial.

MDBChipsInput

Name Type Description
onAdd (name?: string) => any This event fires start if you add chip to chips-placeholder or chips-initial.
onDelete (name?: string) => any This event fires start if you click delete button/backspace in the chips-placeholder or chips-initial.

CSS variables

As part of MDB’s evolving CSS variables approach, chips now uses local CSS variables on .chip and .chips for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

        
            
        // .chip
        --#{$prefix}chip-height: #{$chip-height};
        --#{$prefix}chip-line-height: #{$chip-line-height};
        --#{$prefix}chip-padding-right: #{$chip-padding-right};
        --#{$prefix}chip-margin-y: #{$chip-margin-y};
        --#{$prefix}chip-margin-right: #{$chip-margin-right};
        --#{$prefix}chip-font-size: #{$chip-font-size};
        --#{$prefix}chip-font-weight: #{$chip-font-weight};
        --#{$prefix}chip-font-color: #{$chip-font-color};
        --#{$prefix}chip-bg: #{$chip-bg};
        --#{$prefix}chip-border-radius: #{$chip-br};
        --#{$prefix}chip-transition-opacity: #{$chip-transition-opacity};
        --#{$prefix}chip-img-margin-right: #{$chip-img-margin-right};
        --#{$prefix}chip-img-margin-left: #{$chip-img-margin-left};
        --#{$prefix}chip-close-padding-left: #{$chip-close-padding-left};
        --#{$prefix}chip-close-font-size: #{$chip-close-font-size};
        --#{$prefix}chip-close-opacity: #{$chip-close-opacity};
        --#{$prefix}chip-outline-border-width: #{$chip-outline-border-width};
        --#{$prefix}chip-md-height: #{$chip-md-height};
        --#{$prefix}chip-md-br: #{$chip-md-br};
        --#{$prefix}chip-lg-height: #{$chip-lg-height};
        --#{$prefix}chip-lg-br: #{$chip-lg-br};
        --#{$prefix}chip-contenteditable-border-width: #{$chip-contenteditable-border-width};
        --#{$prefix}chip-contenteditable-border-color: #{$chip-contenteditable-border-color};
        --#{$prefix}chip-icon-color: #{$chip-icon-color};
        --#{$prefix}chip-icon-transition: #{$chip-icon-transition};
        --#{$prefix}chip-icon-hover-color: #{$chip-icon-hover-color};

        // .chips
        --#{$prefix}chips-min-height: #{$chips-min-height};
        --#{$prefix}chips-padding-bottom: #{$chips-padding-bottom};
        --#{$prefix}chips-margin-bottom: #{$chips-margin-bottom};
        --#{$prefix}chips-transition: #{$chips-transition};
        --#{$prefix}chips-padding-padding: #{$chips-padding-padding};
        --#{$prefix}chips-input-width: #{$chips-input-width};

SCSS variables

        
            
        $chip-height: 32px;
        $chip-md-height: 42px;
        $chip-lg-height: 52px;
        $chip-font-size: 13px;
        $chip-font-weight: 400;
        $chip-font-color: $body-color;
        $chip-line-height: 2;
        $chip-padding-right: 12px;
        $chip-br: 16px;
        $chip-md-br: 21px;
        $chip-lg-br: 26px;
        $chip-bg: #eceff1;
        $chip-margin-y: 5px;
        $chip-margin-right: 1rem;
        $chip-transition-opacity: 0.3s linear;
        $chip-img-margin-right: 8px;
        $chip-img-margin-left: -12px;
        $chip-icon-color: #afafaf;
        $chip-icon-hover-color: #8b8b8b;
        $chip-icon-transition: 0.2s ease-in-out;
        $chip-outline-border-width: 1px;
        $chip-close-font-size: 16px;
        $chip-close-line-height: $chip-height;
        $chip-close-padding-left: 8px;
        $chip-close-opacity: 0.53;
        $chip-contenteditable-border-width: 3px;
        $chip-contenteditable-border-color: #b2b3b4;
        
        $chips-margin-bottom: 30px;
        $chips-min-height: 45px;
        $chips-padding-bottom: 1rem;
        $chips-input-font-color: $body-color;
        $chips-input-font-size: 13px;
        $chips-input-font-weight: 500;
        $chips-input-height: $chip-height;
        $chips-input-margin-right: 20px;
        $chips-input-line-height: $chip-height;
        $chips-input-width: 150px;
        $chips-transition: 0.3s ease;
        $chips-focus-box-shadow: 0.3s ease;
        $chips-padding-padding: 5px;