Lists Others Tabs

Chip set (chip_set)

A set of chips components.

🔗 External documentation.

ID Label Description Schema
chips Chips The chip components. 
            id: chip_set
label: 'Chip set'
description: 'A set of chips components. '
homepage: 'https://m2.material.io/components/chips'
variants:
    default:
        id: default
        label: Default
    input:
        id: input
        label: Input
        description: 'Indicates that the chips in the set are input chips, which enable user input by converting text into chips.'
    choice:
        id: choice
        label: Choice
        description: 'Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.'
    filter:
        id: filter
        label: Filter
        description: 'Optional. Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.'
slots:
    chips:
        id: chips
        label: Chips
        description: 'The chip components.'
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': chip_set
            chips:
                -
                    '@component': chip
                    '@variant': selected
                    text: 'Chip One'
                -
                    '@component': chip
                    text: 'Chip Two'
                -
                    '@component': chip
                    text: 'Chip Three'

Default ( default )

Chip One
Chip Two
Chip Three
<div class="mdc-chip-set" role="grid"> <div class="mdc-chip--selected mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__checkmark"> <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30"> <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path> </svg> </div> <span class="mdc-chip__text">Chip One</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Two</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Three</span> </div> </div>

Input ( input )

Indicates that the chips in the set are input chips, which enable user input by converting text into chips.

Chip One
Chip Two
Chip Three
<div class="mdc-chip-set" role="grid"> <div class="mdc-chip--selected mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__checkmark"> <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30"> <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path> </svg> </div> <span class="mdc-chip__text">Chip One</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Two</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Three</span> </div> </div>

Choice ( choice )

Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.

Chip One
Chip Two
Chip Three
<div class="mdc-chip-set" role="grid"> <div class="mdc-chip--selected mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__checkmark"> <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30"> <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path> </svg> </div> <span class="mdc-chip__text">Chip One</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Two</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Three</span> </div> </div>

Filter ( filter )

Optional. Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.

Chip One
Chip Two
Chip Three
<div class="mdc-chip-set" role="grid"> <div class="mdc-chip--selected mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__checkmark"> <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30"> <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path> </svg> </div> <span class="mdc-chip__text">Chip One</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Two</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Three</span> </div> </div>