Chips
Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
Default chips
Use class .chip-primary, .chip-secondary, .chip-disabled with chip.
Primary Chips
Secondary Chips
Chips Dismissable
<div class="chip chip-primary">
<input type="checkbox">
<span><span class="chip-text">Primary Chips</span></span>
</div>
<div class="chip chip-secondary">
<input type="checkbox">
<span><span class="chip-text">Secondary Chips</span></span>
</div>
<div class="chip chip-primary chip-disabled">
<input type="checkbox">
<span><span class="chip-text">Chips Dismissable</span></span>
</div>
Chips pill
Use class .chip-pill with chip.
Primary Chips
Secondary Chips
Chips Dismissable
<div class="chip chip-pill chip-primary">
<input type="checkbox">
<span><span class="chip-text">Primary Chips</span></span>
</div>
<div class="chip chip-pill chip-secondary">
<input type="checkbox">
<span><span class="chip-text">Secondary Chips</span></span>
</div>
<div class="chip chip-pill chip-primary chip-disabled">
<input type="checkbox">
<span><span class="chip-text">Chips Dismissable</span></span>
</div>
Chips tick
Use .chip-ticked with chip class.
Ticked Chips
Ticked Chips
Chips Dismissable
<div class="chip chip-primary chip-ticked">
<input type="checkbox">
<span><span class="chip-text">Ticked Chips</span></span>
</div>
<div class="chip chip-secondary chip-ticked">
<input type="checkbox">
<span><span class="chip-text">Ticked Chips</span></span>
</div>
<div class="chip chip-secondary chip-ticked chip-disabled">
<input type="checkbox">
<span><span class="chip-text">Chips Dismissable</span></span>
</div>
Chips with icon
Use .chip-wth-icon with chip class.
<div class="chip chip-primary chip-wth-icon">
<input type="checkbox">
<span><i class="ri-bookmark-3-line"></i><span class="chip-text">Icon Chips</span></span>
</div>
<div class="chip chip-secondary chip-wth-icon">
<input type="checkbox">
<span><i class="ri-bookmark-3-line"></i><span class="chip-text">Icon Chips</span></span>
</div>
<div class="chip chip-secondary chip-wth-icon chip-disabled">
<input type="checkbox">
<span><i class="ri-bookmark-3-line"></i><span class="chip-text">Icon Chips</span></span>
</div>
Chips outline
Use class .chip-outline-primary, .chip-outline-secondary with chip class.
Primary Chips
Secondary Chips
Primary Chips
Secondary Chips
Ticked Chips
Ticked Chips
Chips Dismissable
<div class="chip chip-outline-primary">
<input type="checkbox">
<span><span class="chip-text">Primary Chips</span></span>
</div>
<div class="chip chip-outline-secondary">
<input type="checkbox">
<span><span class="chip-text">Secondary Chips</span></span>
</div>
<div class="chip chip-pill chip-outline-primary">
<input type="checkbox">
<span><span class="chip-text">Primary Chips</span></span>
</div>
<div class="chip chip-pill chip-outline-secondary">
<input type="checkbox">
<span><span class="chip-text">Secondary Chips</span></span>
</div>
<div class="chip chip-outline-primary chip-wth-icon">
<input type="checkbox">
<span><i class="ri-bookmark-3-line"></i><span class="chip-text">Icon Chips</span></span>
</div>
<div class="chip chip-outline-secondary chip-wth-icon">
<input type="checkbox">
<span><i class="ri-bookmark-3-line"></i><span class="chip-text">Icon Chips</span></span>
</div>
<div class="chip chip-outline-primary chip-ticked">
<input type="checkbox">
<span><span class="chip-text">Ticked Chips</span></span>
</div>
<div class="chip chip-outline-secondary chip-ticked">
<input type="checkbox">
<span><span class="chip-text">Ticked Chips</span></span>
</div>
<div class="chip chip-outline-primary chip-disabled">
<input type="checkbox">
<span><span class="chip-text">Chips Dismissable</span></span>
</div>
Chips dismissable
Use .chip-dismissable
Chips Dismissable
Chips Dismissable
Chips Dismissable
Chips Dismissable
Chips Dismissable
Chips Dismissable
<div class="chip chip-primary chip-dismissable">
<span><span class="chip-text">Chips Dismissable</span>
<button type="button" class="btn-close"></button>
</span>
</div>
<div class="chip chip-secondary chip-dismissable">
<span><span class="chip-text">Chips Dismissable</span>
<button type="button" class="btn-close"></button>
</span>
</div>
<div class="chip chip-pill chip-primary chip-dismissable">
<span><span class="chip-text">Chips Dismissable</span>
<button type="button" class="btn-close"></button>
</span>
</div>
<div class="chip chip-outline-primary chip-dismissable">
<span><span class="chip-text">Chips Dismissable</span>
<button type="button" class="btn-close"></button>
</span>
</div>
<div class="chip chip-outline-secondary chip-dismissable">
<span><span class="chip-text">Chips Dismissable</span>
<button type="button" class="btn-close"></button>
</span>
</div>
<div class="chip chip-pill chip-outline-secondary chip-dismissable">
<span><span class="chip-text">Chips Dismissable</span>
<button type="button" class="btn-close"></button>
</span>
</div>
User chips
Use class .user-chip
Basic Chips
Basic Chips
Basic Chips
Basic Chips
Basic Chips
<div class="chip chip-primary user-chip">
<span>
<span class="avatar">
<img src="dist/img/avatar12.jpg" alt="user" class="avatar-img">
</span>
<span class="chip-text">Basic Chips</span>
</span>
</div>
<div class="chip chip-secondary user-chip">
<span>
<span class="avatar">
<img src="dist/img/avatar11.jpg" alt="user" class="avatar-img">
</span>
<span class="chip-text">Basic Chips</span>
</span>
</div>
<div class="chip chip-secondary chip-dismissable user-chip">
<span>
<span class="avatar">
<img src="dist/img/avatar13.jpg" alt="user" class="avatar-img">
</span>
<span class="chip-text">Basic Chips</span>
<button type="button" class="btn-close"></button>
</span>
</div>
<div class="chip chip-outline-primary user-chip">
<span>
<span class="avatar">
<img src="dist/img/avatar14.jpg" alt="user" class="avatar-img">
</span>
<span class="chip-text">Basic Chips</span>
</span>
</div>
<div class="chip chip-outline-secondary chip-dismissable user-chip">
<span>
<span class="avatar">
<img src="dist/img/avatar15.jpg" alt="user" class="avatar-img">
</span>
<span class="chip-text">Basic Chips</span>
<button type="button" class="btn-close"></button>
</span>
</div>
Sizing
Use .chip-lg class with chip.
Chips
Basic Chips
Chips Lg
User chips Lg
<div class="chip chip-secondary">
<input type="checkbox">
<span><span class="chip-text">Chips</span></span>
</div>
<div class="chip chip-secondary user-chip">
<span>
<span class="avatar">
<img src="dist/img/avatar12.jpg" alt="user" class="avatar-img">
</span>
<span class="chip-text">Basic Chips</span>
</span>
</div>
<div class="chip chip-lg chip-secondary">
<input type="checkbox">
<span><span class="chip-text">Chips Lg</span></span>
</div>
<div class="chip chip-lg chip-secondary user-chip">
<span>
<span class="avatar">
<img src="dist/img/avatar12.jpg" alt="user" class="avatar-img">
</span>
<span class="chip-text">User chips Lg</span>
</span>
</div>
Input Chips
Below is the example of input chips.
<input type="text" id="exist_values1" class="user-input-tagged form-control" name="tag-3" value="Basic Chip1,Basic Chip2,Basic Chip3" placeholder="Add Chips">