Chips

React Bootstrap 5 Chips component

Responsive chips built with Bootstrap 5, React 17 and Material Design. 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
tag String 'div' Defines tag of the MDBChip element <MDBBadge tag="section" />
className String '' Add custom class to MDBChip <MDBChip className="class" />
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' />
onClose Function '' A callback fired when a chip is closed <MDBChip onClose{(e) => console.log(e)} />

MDBChipsInput

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