Chip

<style>
    .demo-column {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
    }

    .demo-caption {
        font-size: 12px;
        color: #757575;
    }
</style>

<div class="demo-column">
    <span class="demo-caption">Multi-select set (ArrowLeft / ArrowRight / Home / End to rove):</span>
    <mdc-chip-set aria-label="Filter options">
        <mdc-chip variant="filter">
            <span>Extras</span>
        </mdc-chip>
        <mdc-chip variant="filter">
            <span>Sea View</span>
        </mdc-chip>
        <mdc-chip variant="filter" selected>
            <span>Wi-Fi</span>
        </mdc-chip>
    </mdc-chip-set>
</div>

<div class="demo-column">
    <span class="demo-caption">Single-select set (single-select keeps at most one selected):</span>
    <mdc-chip-set single-select aria-label="Travel method">
        <mdc-chip variant="filter">
            <span>Car</span>
        </mdc-chip>
        <mdc-chip variant="filter">
            <span>Train</span>
        </mdc-chip>
        <mdc-chip variant="filter" selected>
            <span>Flight</span>
        </mdc-chip>
    </mdc-chip-set>
</div>

<div class="demo-column">
    <span class="demo-caption">Set with a disabled chip — arrow keys skip it:</span>
    <mdc-chip-set aria-label="With disabled">
        <mdc-chip variant="filter">
            <span>One</span>
        </mdc-chip>
        <mdc-chip variant="filter" disabled>
            <span>Disabled</span>
        </mdc-chip>
        <mdc-chip variant="filter">
            <span>Two</span>
        </mdc-chip>
    </mdc-chip-set>
</div>

<style>
    .demo-row {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 16px;
        flex-wrap: wrap;
    }

    .demo-caption {
        display: block;
        font-size: 12px;
        color: #757575;
        padding: 0 16px;
    }
</style>

<span class="demo-caption">always-focusable keeps a disabled chip focusable (Tab through the set):</span>
<div class="demo-row">
    <mdc-chip variant="assist" disabled always-focusable>
        <span>Disabled, Always Focusable</span>
    </mdc-chip>

    <mdc-chip variant="assist" disabled>
        <span>Plain Disabled</span>
    </mdc-chip>
</div>

<span class="demo-caption">soft-disabled dims the chip but leaves it focusable and in the tab order:</span>
<div class="demo-row">
    <mdc-chip variant="assist" soft-disabled>
        <span>Soft Disabled</span>
    </mdc-chip>

    <mdc-chip variant="filter" soft-disabled selected>
        <span>Soft Disabled Selected</span>
    </mdc-chip>
</div>

<style>
    .demo-row {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 16px;
    }
</style>

<div class="demo-row">
    <mdc-chip variant="input">
        <span slot="avatar">A</span>
        <span>Input with Avatar</span>
    </mdc-chip>

    <mdc-chip variant="input">
        <span slot="avatar">B</span>
        <span>Another Input</span>
    </mdc-chip>

    <mdc-chip variant="input" selected>
        <span slot="avatar">C</span>
        <span>Selected Input</span>
    </mdc-chip>
</div>

<style>
    .demo-row {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 16px;
    }
</style>

<div class="demo-row">
    <mdc-chip variant="assist" disabled>
        <span>Disabled Assist</span>
    </mdc-chip>

    <mdc-chip variant="filter" disabled>
        <span>Disabled Filter</span>
    </mdc-chip>

    <mdc-chip variant="filter" selected disabled>
        <span>Disabled Selected</span>
    </mdc-chip>

    <mdc-chip variant="input" disabled>
        <span>Disabled Input</span>
    </mdc-chip>

    <mdc-chip variant="suggestion" disabled>
        <span>Disabled Suggestion</span>
    </mdc-chip>
</div>

<style>
    .demo-row {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 16px;
        flex-wrap: wrap;
    }
</style>

<div class="demo-row">
    <mdc-chip variant="assist" elevated>
        <span>Elevated Assist</span>
    </mdc-chip>

    <mdc-chip variant="assist" elevated>
        <mdc-icon slot="icon">add</mdc-icon>
        <span>Elevated Assist with Icon</span>
    </mdc-chip>

    <mdc-chip variant="filter" elevated selected>
        <span>Elevated Filter</span>
    </mdc-chip>

    <mdc-chip variant="assist" elevated disabled>
        <span>Elevated Disabled</span>
    </mdc-chip>
</div>

<style>
    .demo-row {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 16px;
        flex-wrap: wrap;
    }
</style>

<div class="demo-row">
    <mdc-chip variant="assist" href="https://m3.material.io/components/chips/overview" target="_blank">
        <span>Link Assist</span>
    </mdc-chip>

    <mdc-chip variant="suggestion" href="https://m3.material.io/components/chips/overview">
        <mdc-icon slot="icon">search</mdc-icon>
        <span>Link Suggestion</span>
    </mdc-chip>

    <mdc-chip variant="assist" href="https://m3.material.io/components/chips/overview" disabled>
        <span>Disabled Link</span>
    </mdc-chip>
</div>

<style>
    .demo-row {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 16px;
    }
</style>

<div class="demo-row">
    <mdc-chip variant="assist">
        <mdc-icon slot="icon">add</mdc-icon>
        <span>Assist with Icon</span>
    </mdc-chip>

    <mdc-chip variant="filter">
        <mdc-icon slot="icon">filter_list</mdc-icon>
        <span>Filter with Icon</span>
    </mdc-chip>

    <mdc-chip variant="filter" selected>
        <mdc-icon slot="icon">check</mdc-icon>
        <span>Selected with Icon</span>
    </mdc-chip>
</div>

<style>
    .demo-row {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 16px;
        flex-wrap: wrap;
    }
</style>

<div class="demo-row">
    <mdc-chip variant="input" remove-only aria-label-remove="Remove john@example.com">
        <mdc-icon slot="avatar">face</mdc-icon>
        <span>john@example.com</span>
    </mdc-chip>

    <mdc-chip variant="input" remove-only disabled aria-label-remove="Remove disabled">
        <span>Disabled Remove-Only</span>
    </mdc-chip>

    <mdc-chip variant="input" aria-label-remove="Remove standard">
        <span>Standard Input (for comparison)</span>
    </mdc-chip>
</div>

<style>
    .demo-row {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 16px;
        flex-wrap: wrap;
    }
</style>

<div class="demo-row">
    <mdc-chip variant="filter" selected>
        <span>Default Checkmark</span>
    </mdc-chip>

    <mdc-chip variant="filter" selected>
        <mdc-icon slot="selected-icon">favorite</mdc-icon>
        <span>Custom Selected Icon</span>
    </mdc-chip>

    <mdc-chip variant="filter">
        <mdc-icon slot="selected-icon">favorite</mdc-icon>
        <span>Custom Icon (unselected)</span>
    </mdc-chip>
</div>

<style>
    .demo-row {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 16px;
    }
</style>

<div class="demo-row">
    <mdc-chip variant="filter" selected>
        <span>Selected Filter</span>
    </mdc-chip>

    <mdc-chip variant="filter">
        <span>Unselected Filter</span>
    </mdc-chip>

    <mdc-chip variant="input" selected>
        <span>Selected Input</span>
    </mdc-chip>

    <mdc-chip variant="input">
        <span>Unselected Input</span>
    </mdc-chip>
</div>

<style>
    .demo-row {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 16px;
    }
</style>

<div class="demo-row">
    <mdc-chip variant="assist">
        <span>Assist Chip</span>
    </mdc-chip>

    <mdc-chip variant="filter">
        <span>Filter Chip</span>
    </mdc-chip>

    <mdc-chip variant="input">
        <span>Input Chip</span>
    </mdc-chip>

    <mdc-chip variant="suggestion">
        <span>Suggestion Chip</span>
    </mdc-chip>
</div>