Vai al contenuto principale

Bootstrap Italia

Interfacce Web Accessibili per la PA

Chips

Chips

Elementi compatti che rappresentano un input, attributo o azione.

Una chip è composta da un tag div con classe .chip. Contiene una label e, opzionalmente, un pulsante di chiusura/rimozione, un’icona o un avatar.

La versione con sola label centra il testo al suo interno e richiede una classe aggiuntiva .chip-simple.

Aggiungendo la classe .chip-lg al contenitore si ottiene una versione più grande della chip.

L’azione richiesta per l’eliminazione della chip andrà associata al <button>.

Varianti standard e grandi

Solo testo

Etichetta

Testo e chiusura

Etichetta

Icona, etichetta e pulsante

Etichetta

Avatar, etichetta e chiusura

Mario Rossi
Etichetta

Solo testo grande

Etichetta

Testo e chiusura grande

Etichetta

Icona, testo e chiusura grande

Etichetta

Avatar, testo e chiusura grande

Mario Rossi
Etichetta 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<div class="row bg-white p-4">
  <div class="col-12 col-md-6">
    <p class="mt-4 mb-2">Solo testo</p>
    <div class="chip">
      <span class="chip-label">Etichetta</span>
    </div>
    <p class="mt-4 mb-2">Testo e chiusura</p>
    <div class="chip">
      <span class="chip-label">Etichetta</span>
      <button data-bs-dismiss='chip'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
    <p class="mt-4 mb-2">Icona, etichetta e pulsante</p>
    <div class="chip">
      <svg class="icon icon-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
      <span class="chip-label">Etichetta</span>
      <button data-bs-dismiss='chip'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
    <p class="mt-4 mb-2">Avatar, etichetta e chiusura</p>
    <div class="chip">
      <div class="avatar size-xs">
        <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
      </div>
      <span class="chip-label">Etichetta</span>
      <button data-bs-dismiss='chip'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
  </div>
  <div class="col-12 col-md-6">
    <p class="mt-4 mb-2">Solo testo grande</p>
    <div class="chip chip-lg">
      <span class="chip-label">Etichetta</span>
    </div>
    <p class="mt-4 mb-2">Testo e chiusura grande</p>
    <div class="chip chip-lg">
      <span class="chip-label">Etichetta</span>
      <button data-bs-dismiss='chip'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
    <p class="mt-4 mb-2">Icona, testo e chiusura grande</p>
    <div class="chip chip-lg">
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
      <span class="chip-label">Etichetta</span>
      <button data-bs-dismiss='chip'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
    <p class="mt-4 mb-2">Avatar, testo e chiusura grande</p>
    <div class="chip chip-lg">
      <div class="avatar size-sm">
        <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
      </div>
      <span class="chip-label">Etichetta</span>
      <button data-bs-dismiss='chip'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
  </div>
</div>
Etichetta con link Etichetta con link Etichetta con link Etichetta con link Etichetta con link Etichetta con link 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  <a href="#" class="chip">
    <span class="chip-label">Etichetta con link</span>
  </a>
  <a href="#" class="chip chip-primary">
    <span class="chip-label">Etichetta con link</span>
  </a>
  <a href="#" class="chip chip-secondary">
    <span class="chip-label">Etichetta con link</span>
  </a>
  <a href="#" class="chip chip-success">
    <span class="chip-label">Etichetta con link</span>
  </a>
  <a href="#" class="chip chip-warning">
    <span class="chip-label">Etichetta con link</span>
  </a>
  <a href="#" class="chip chip-danger">
    <span class="chip-label">Etichetta con link</span>
  </a>

Varianti di colore

Gli stili definiti da Bootstrap Italia utilizzano un naming consistente con i temi di Bootstrap:

Primary
Secondary
Success
Danger
Warning 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="chip chip-primary">
  <span class="chip-label">Primary</span>
</div>

<div class="chip chip-secondary">
  <span class="chip-label">Secondary</span>
</div>

<div class="chip chip-success">
  <span class="chip-label">Success</span>
</div>

<div class="chip chip-danger">
  <span class="chip-label">Danger</span>
</div>

<div class="chip chip-warning">
  <span class="chip-label">Warning</span>
</div>
Primary Secondary Success Danger Warning 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<a class="chip chip-primary" href="#">
  <span class="chip-label">Primary</span>
</a>


<a class="chip chip-secondary" href="#">
  <span class="chip-label">Secondary</span>
</a>


<a class="chip chip-success" href="#">
  <span class="chip-label">Success</span>
</a>


<a class="chip chip-danger" href="#">
  <span class="chip-label">Danger</span>
</a>


<a class="chip chip-warning" href="#">
  <span class="chip-label">Warning</span>
</a>

Chip Disabilitata

Aggiungendo la classe .chip-disabled al contenitore, e la classe .disabled con l’attributo aria-disabled="true" al <button>, si ottiene una chip disabilitata. Il bottone resta raggiungibile da tastiera, ma il click (mouse e tastiera) è bloccato.

Etichetta
Etichetta
Etichetta
Mario Rossi
Etichetta 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<div class="chip chip-disabled">
  <span class="chip-label">Etichetta</span>
</div>

<div class="chip chip-disabled">
  <span class="chip-label">Etichetta</span>
  <button class="disabled" aria-disabled="true" data-bs-dismiss='chip'>
    <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Elimina etichetta, non disponibile: chip disabilitata</span>
  </button>
</div>

<div class="chip chip-disabled">
  <svg class="icon icon-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
  <span class="chip-label">Etichetta</span>
  <button class="disabled" aria-disabled="true" data-bs-dismiss='chip'>
    <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Elimina etichetta, non disponibile: chip disabilitata</span>
  </button>
</div>

<div class="chip chip-disabled">
  <div class="avatar size-xs">
    <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
  </div>
  <span class="chip-label">Etichetta</span>
  <button class="disabled" aria-disabled="true" data-bs-dismiss='chip'>
    <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Elimina etichetta, non disponibile: chip disabilitata</span>
  </button>
</div>

Gruppi di Chip

I gruppi di chip vengono visualizzati in linea.

Etichetta
Etichetta
Etichetta
Mario Rossi
Etichetta
Etichetta
Etichetta
Etichetta
Mario Rossi
Etichetta 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<div class="bg-white p-4">
  <div class="chip">
    <span class="chip-label">Etichetta</span>
  </div>
  <div class="chip">
    <span class="chip-label">Etichetta</span>
    <button data-bs-dismiss='chip'>
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina etichetta</span>
    </button>
  </div>
  <div class="chip">
    <svg class="icon icon-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
    <span class="chip-label">Etichetta</span>
    <button data-bs-dismiss='chip'>
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina etichetta</span>
    </button>
  </div>
  <div class="chip">
    <div class="avatar size-xs">
      <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
    </div>
    <span class="chip-label">Etichetta</span>
    <button data-bs-dismiss='chip'>
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina etichetta</span>
    </button>
  </div>

  <hr/>

  <div class="chip chip-lg">
    <span class="chip-label">Etichetta</span>
  </div>
  <div class="chip chip-lg">
    <span class="chip-label">Etichetta</span>
    <button data-bs-dismiss='chip'>
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina etichetta</span>
    </button>
  </div>
  <div class="chip chip-lg">
    <svg class="icon icon-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
    <span class="chip-label">Etichetta</span>
    <button data-bs-dismiss='chip'>
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina etichetta</span>
    </button>
  </div>
  <div class="chip chip-lg">
    <div class="avatar size-xs">
      <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
    </div>
    <span class="chip-label">Etichetta</span>
    <button data-bs-dismiss='chip'>
      <svg class="icon icon-md"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina etichetta</span>
    </button>
  </div>

</div>
Etichetta Etichetta Etichetta Etichetta
Etichetta grande Etichetta grande Etichetta grande Etichetta grande 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<a href="#" class="chip chip-primary">
  <span class="chip-label">Etichetta</span>
</a>
<a href="#" class="chip chip-primary">
  <span class="chip-label">Etichetta</span>
</a>
<a href="#" class="chip chip-primary">
  <span class="chip-label">Etichetta</span>
</a>
<a href="#" class="chip chip-primary">
  <span class="chip-label">Etichetta</span>
</a>

<hr/>

<a href="#" class="chip chip-lg chip-primary">
  <span class="chip-label">Etichetta grande</span>
</a>
<a href="#" class="chip chip-lg chip-primary">
  <span class="chip-label">Etichetta grande</span>
</a>
<a href="#" class="chip chip-lg chip-primary">
  <span class="chip-label">Etichetta grande</span>
</a>
<a href="#" class="chip chip-lg chip-primary">
  <span class="chip-label">Etichetta grande</span>
</a>

Properties

Il selettore da utilizzare per le sovrascrittura delle property è .chip. La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.

Properties statiche

Variabile CSS Descrizione (Inglese) Valore predefinito
--bsi-chip-border-radius Controls the border radius for the chip, using radius tokens. var(--bsi-radius-rounded)
--bsi-chip-border-width Controls the border width for the chip. 1px
--bsi-chip-icon-color Controls the icon color for the chip, using icon tokens. var(--bsi-icon-secondary)
--bsi-chip-link-hover Controls the link hover color for the chip, using color tokens. var(--bsi-color-text-inverse)
--bsi-chip-padding-y Controls the vertical padding for the chip, using spacing tokens. var(--bsi-spacing-3xs)
--bsi-chip-text-line-height Controls the text line height for the chip, using font tokens. var(--bsi-label-leading)
--bsi-chip-text-weight Controls the text weight for the chip, using font tokens. var(--bsi-font-weight-solid)

Properties dinamiche

Nella colonna "Valore predefinito" è possibile trovare, oltre al valore di base, un’indicazione delle eventuali varianti responsive/tema/stato della property stessa: fare riferimento ai file elencati nella colonna "File SCSS" per il dettaglio dei valori e del contesto di applicazione.

Variabile CSS Descrizione (Inglese) Valore predefinito File SCSS
--bsi-chip-background-color Controls the background color for the chip, using color tokens. var(--bsi-color-background-muted) +7 _chips.scss
--bsi-chip-border-color Controls the border color for the chip, using color tokens. var(--bsi-color-border-subtle) +11 _chips.scss
--bsi-chip-padding-x Controls the horizontal padding for the chip, using spacing tokens. var(--bsi-spacing-xs) +1 _chips.scss
--bsi-chip-text-color Controls the text color for the chip, using color tokens. var(--bsi-color-text-secondary) +6 _chips.scss
--bsi-chip-text-size Controls the text size for the chip, using font tokens. var(--bsi-label-font-size) +1 _chips.scss

Breaking change

  • È stata rimossa la classe .chip-simple.
  • Nelle chip con pulsante di chiusura il tag <label> diventa <span>.
  • Alle icone del pulsante di chiusura per le chip con classe .chip-lg viene aggiunta la classe .icon-md.
  • Il pulsante di chiusura richiede ora data-bs-dismiss="chip" (in precedenza, dove funzionava, si usava data-bs-dismiss="alert" insieme alla classe alert aggiunta al contenitore — entrambi da rimuovere). Le chip disabilitate usano class="disabled" + aria-disabled="true" sul bottone, non più l’attributo disabled nativo, per restare raggiungibili da tastiera.
  • I chip con link (<a>) non supportano il pulsante di chiusura: un elemento interattivo non può contenerne validamente un altro. Gli esempi chip-lg con chiusura in “Gruppi di Chip con link” sono stati rimossi.