Chip

Chips are compact elements that represent an input, attribute, or action. They allow users to enter information, make selections, filter content, or trigger actions.

Chip One

Chip Two

Chip Three

<x-mbc::chip-set>
    <x-mbc::chip label="Chip One" />
    <x-mbc::chip label="Chip Two" />
    <x-mbc::chip label="Chip Three" />
</x-mbc::chip-set>

Basic Chips link

Basic chips represent simple elements without complex interactions. They must be wrapped in a chip-set component with variant="basic" (default).

Action

Comedy

Drama

Horror

Sci-Fi

<x-mbc::chip-set variant="basic">
    <x-mbc::chip label="Action" />
    <x-mbc::chip label="Comedy" />
    <x-mbc::chip label="Drama" />
    <x-mbc::chip label="Horror" />
    <x-mbc::chip label="Sci-Fi" />
</x-mbc::chip-set>

Note: Basic chips are typically used for displaying categories, tags, or non-interactive labels.

Chips with Icons link

Chips can include leading icons to provide visual context. Use the icon prop with a Material Icons name.

home Home

favorite Favorite

settings Settings

person Person

email Email

<x-mbc::chip-set>
    <x-mbc::chip label="Home" icon="home" />
    <x-mbc::chip label="Favorite" icon="favorite" />
    <x-mbc::chip label="Settings" icon="settings" />
    <x-mbc::chip label="Person" icon="person" />
    <x-mbc::chip label="Email" icon="email" />
</x-mbc::chip-set>

Tip: Icons help users quickly identify the purpose or category of a chip.

Filter chips allow users to refine content by selecting one or more options. Use variant="filter" on the chip-set and selected prop to mark chips as active. Filter chips show a checkmark when selected.

Filter by Category:

All

photo Photos

videocam Videos

description Documents

music_note Music

Filter by Status:

Active

Pending

Completed

Archived

<div style="display: flex; flex-direction: column; gap: 1.5rem;">
    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Filter by Category:</x-mbc::typography>
        <x-mbc::chip-set variant="filter">
            <x-mbc::chip label="All" :selected="true" />
            <x-mbc::chip label="Photos" icon="photo" />
            <x-mbc::chip label="Videos" icon="videocam" />
            <x-mbc::chip label="Documents" icon="description" />
            <x-mbc::chip label="Music" icon="music_note" />
        </x-mbc::chip-set>
    </div>

    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Filter by Status:</x-mbc::typography>
        <x-mbc::chip-set variant="filter">
            <x-mbc::chip label="Active" :selected="true" />
            <x-mbc::chip label="Pending" :selected="true" />
            <x-mbc::chip label="Completed" />
            <x-mbc::chip label="Archived" />
        </x-mbc::chip-set>
    </div>
</div>

Note: Filter chips are ideal for multi-select filtering scenarios where users can select multiple options.

Input Chips link

Input chips represent discrete pieces of information entered by the user. Use variant="input" on the chip-set. Input chips include a trailing delete icon that allows users to remove them.

Email Recipients:

person john@example.com

person jane@example.com

group team@company.com

Tags:

label Laravel

label PHP

label Material Design

label Blade

<div style="display: flex; flex-direction: column; gap: 1.5rem;">
    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Email Recipients:</x-mbc::typography>
        <x-mbc::chip-set variant="input">
            <x-mbc::chip label="john@example.com" icon="person" />
            <x-mbc::chip label="jane@example.com" icon="person" />
            <x-mbc::chip label="team@company.com" icon="group" />
        </x-mbc::chip-set>
    </div>

    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Tags:</x-mbc::typography>
        <x-mbc::chip-set variant="input">
            <x-mbc::chip label="Laravel" icon="label" />
            <x-mbc::chip label="PHP" icon="label" />
            <x-mbc::chip label="Material Design" icon="label" />
            <x-mbc::chip label="Blade" icon="label" />
        </x-mbc::chip-set>
    </div>
</div>

Tip: Input chips are commonly used in tag inputs, email recipient fields, and multi-select scenarios where users add items dynamically.

Chip States link

Chips support different states including selected, disabled, and with touch wrapper for better accessibility.

Selected State:

Not Selected

Selected

Disabled State:

Enabled Chip

Disabled Chip

With Touch Wrapper (Better Touch Accessibility):

Normal Chip

Touch Chip

Combined States:

check_circle Selected with Icon

block Disabled with Icon

info Normal with Icon

<div style="display: flex; flex-direction: column; gap: 1.5rem;">
    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Selected State:</x-mbc::typography>
        <x-mbc::chip-set variant="filter">
            <x-mbc::chip label="Not Selected" />
            <x-mbc::chip label="Selected" :selected="true" />
        </x-mbc::chip-set>
    </div>

    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Disabled State:</x-mbc::typography>
        <x-mbc::chip-set>
            <x-mbc::chip label="Enabled Chip" />
            <x-mbc::chip label="Disabled Chip" :disabled="true" />
        </x-mbc::chip-set>
    </div>

    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>With Touch Wrapper (Better Touch Accessibility):</x-mbc::typography>
        <x-mbc::chip-set>
            <x-mbc::chip label="Normal Chip" />
            <x-mbc::chip label="Touch Chip" :withWrapper="true" />
        </x-mbc::chip-set>
    </div>

    <div>
        <x-mbc::typography variant="subtitle2" gutterBottom>Combined States:</x-mbc::typography>
        <x-mbc::chip-set variant="filter">
            <x-mbc::chip label="Selected with Icon" icon="check_circle" :selected="true" />
            <x-mbc::chip label="Disabled with Icon" icon="block" :disabled="true" />
            <x-mbc::chip label="Normal with Icon" icon="info" />
        </x-mbc::chip-set>
    </div>
</div>

Note: Use the withWrapper prop to add a larger touch target for better mobile accessibility. Disabled chips cannot be interacted with and have reduced opacity.

Properties link

mbc::chip-set link

Name	Type	Default	Description
`slot`	`html`		The chips to display
`variant`	`string`	`basic`	Chip set variant: basic, filter, input, choice

mbc::chip link

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the chip is disabled
`icon`	`string\|array`	`null`	Leading icon name
`label`	`string`	`required`	The text label for the chip
`selected`	`boolean`	`false`	Whether the chip is selected (for filter chips)
`withWrapper`	`boolean`	`false`	Add touch target wrapper for better touch accessibility

References link

Edit this page