Chip
Un control pequeño con etiqueta que va en una fila, para una acción sugerida o un enlace a algún sitio, un filtro que está activado o desactivado, o un elemento que la persona introdujo y puede quitar.
- Categoría
- Selección
- Tokens
comp.chip- Nivel
- Base
- Se usa en
- Chip field
- Web
tanrei-chipschedule - SwiftUI
TanreiChipschedule - Jetpack Compose
TanreiChipschedule - Flutter
TanreiChipschedule - React Native
Chipschedule
Generado a partir de docs/status/status.json, specs/chip.spec.json
Tipos
Los ejemplos de Web y React muestran la especificación actual. SwiftUI, Compose, Flutter y React Native van rezagados: todavía ofrecen la revisión anterior del chip, con esquinas menos redondeadas, glifos más pequeños, un glifo close para la acción de quitar, sin destructiveRemove y sin forma de enlace (href), y sus ejemplos muestran esa revisión hasta que se pongan al día.
<tanrei-chip label="Añadir al calendario"><span slot="icon">event</span></tanrei-chip>
<!-- Un chip de acción con href es un enlace. El que abre una pestaña nueva muestra una marca y lo dice con tus palabras. -->
<tanrei-chip label="Horario de apertura" href="/visit/hours/"></tanrei-chip>
<tanrei-chip label="Cómo llegar" href="https://example.com/map" target="new" target-label="se abre en una pestaña nueva"></tanrei-chip>
<!-- Un chip de filtro cambia su propio selected y emite change. -->
<tanrei-chip kind="filter" label="Vegetariano"></tanrei-chip>
<!-- Un chip de entrada tiene un segundo botón, que recibe su nombre de remove-label. -->
<tanrei-chip kind="input" label="Ada Lovelace" remove-label="Quitar a Ada Lovelace">
<img slot="avatar" src="ada.jpg" alt="" />
</tanrei-chip>
<!-- Quitar un archivo adjunto lo pierde: da a la acción de quitar el aspecto destructivo. -->
<tanrei-chip kind="input" label="report.pdf" remove-label="Quitar report.pdf" destructive-remove></tanrei-chip>
<script type="module">
import '@tanrei/web/components/chip';
document.querySelector('[kind="filter"]').addEventListener('change', (e) => filter(e.detail.selected));
// El chip sigue en el DOM: la página lo quita y mueve el foco a un vecino.
document.querySelector('[kind="input"]').addEventListener('remove', (e) => removeRecipient(e.target));
</script>import { Chip } from '@tanrei/react';
<Chip label="Añadir al calendario" onClick={addToCalendar}><span slot="icon">event</span></Chip>
<Chip label="Horario de apertura" href="/visit/hours/" />
<Chip label="Cómo llegar" href="https://example.com/map" target="new" targetLabel="se abre en una pestaña nueva" />
<Chip kind="filter" selected={vegetarian} label="Vegetariano" onChange={(e) => setVegetarian(e.detail.selected)} />
<Chip kind="input" label="Ada Lovelace" removeLabel="Quitar a Ada Lovelace" onRemove={() => removeRecipient(ada)} />
<Chip kind="input" label="report.pdf" removeLabel="Quitar report.pdf" destructiveRemove onRemove={() => removeAttachment(report)} />import Tanrei
// El inicializador elige el tipo.
TanreiChip("Añadir al calendario", icon: "event", action: addToCalendar)
TanreiChip("Vegetariano", isSelected: $vegetarian)
TanreiChip("Ada Lovelace", removeLabel: "Quitar a Ada Lovelace", action: openContact, onRemove: removeAda)import io.github.chnotchy.tanrei.components.TanreiChip
import io.github.chnotchy.tanrei.primitives.TanreiText
// La sobrecarga elige el tipo. onClick por sí solo es un chip de acción.
TanreiChip(onClick = ::addToCalendar, label = "Añadir al calendario", icon = { TanreiText("event") })
// selected con onSelectedChange es un chip de filtro.
TanreiChip(selected = vegetarian, onSelectedChange = { vegetarian = it }, label = "Vegetariano")
// onClick con onRemove es un chip de entrada. Quítalo de tu lista y mueve el foco tú.
TanreiChip(
onClick = { openContact(ada) },
onRemove = { recipients -= ada },
label = "Ada Lovelace",
removeContentDescription = "Quitar a Ada Lovelace",
avatar = { ContactPhoto(ada) },
)import 'package:tanrei/tanrei.dart';
// El constructor elige el tipo.
TanreiChip(label: 'Añadir al calendario', icon: const Icon(AppSymbols.event), onPressed: addToCalendar);
TanreiChip.filter(
label: 'Vegetariano',
selected: vegetarian,
onSelected: (bool value) => setState(() => vegetarian = value),
);
TanreiChip.input(
label: 'Ada Lovelace',
removeSemanticLabel: 'Quitar a Ada Lovelace',
avatar: Image.asset('ada.png', fit: BoxFit.cover),
onDeleted: () => setState(() => recipients.remove(ada)), // y mueve el foco tú
);import { Chip } from '@tanrei/react-native';
<Chip label="Añadir al calendario" icon="event" onPress={addToCalendar} />
<Chip kind="filter" label="Vegetariano" selected={vegetarian} onSelectedChange={setVegetarian} />
<Chip
kind="input"
label="Ada Lovelace"
avatar={{ uri: ada.photo }}
removeAccessibilityLabel="Quitar a Ada Lovelace"
onRemove={() => removeRecipient(ada)}
/>Variantes, tamaños y estado deshabilitado
Acciones de quitar: simple (predeterminada) y destructiva; pasa el cursor por encima o dales el foco
Chips de enlace: aquí, en una pestaña nueva, deshabilitado
En el sistema predeterminado, todos los chips tienen forma de píldora, y la conservan cuando un texto más grande los hace más altos. Sus glifos son tan grandes como permite su altura: 24 en un chip mediano y 20 en uno pequeño. La marca de verificación de un chip de filtro seleccionado es el glifo check del conjunto de iconos del sistema, y el glifo de quitar es cancel, siempre dibujado con relleno. El chip no dibuja ninguna marca propia, de modo que un sistema de diseño que quiera otras marcas elige otro conjunto de iconos. El borde de un chip outlined es la línea fina, la misma línea discreta que dibuja un divisor.
Anatomía
Anatomía
action-outlined, tal como lo dibuja el paquete web.| Parte | Descripción |
|---|---|
1 container | The shape that holds the chip's content and carries hover, focus and press of the chip itself. |
2 outline · opcional | The border, drawn inside the container's edge. Transparent where the look has none (elevated, selected). |
3 icon · opcional | Leading glyph of the system's icon set. A selected filter chip shows the glyph `check` in its place. |
4 avatar · opcional | Leading image of an input chip (a person, a file), in place of the icon. |
5 label | Text that names the choice, action or item. |
6 remove · opcional | An input chip's trailing remove action: the glyph `cancel` of the system's icon set, drawn filled, on a round container that carries its own hover, focus and press and sits concentric with the chip's round end: as far from the end as from the top and the bottom. A separate button for assistive technology. It takes the error color while it is hovered, focused or pressed only while destructiveRemove is true. |
7 focus-ring | Gap-then-ring indicator shown for keyboard focus, around the chip or around the remove action, whichever has focus. |
Medidas
Medidas
| Longitud | Token | Valor (px) |
|---|---|---|
container padding-inline-with-icon | tanrei.comp.chip.container.padding-inline-with-icon.medium | 8 |
container gap | tanrei.comp.chip.container.gap.medium | 8 |
container height | tanrei.comp.chip.container.height.medium | 32 |
icon size | tanrei.comp.chip.icon.size.medium | 24 |
action-outlined, tal como lo dibuja el paquete web.Propiedades
| Propiedad | Tipo | Valor predeterminado | Descripción |
|---|---|---|---|
kind | action | filter | input | "action" | What the chip does. action: a button that performs or suggests something, or with href a link to it. filter: a two-state control, on or off. input: an item the user entered, which the user can remove. Kind decides the role and the parts, not the look. |
variant | outlined | elevated | "outlined" | Look. Outlined sits flat on a plain surface; elevated is raised for chips over media or a busy background. A design system may add values. |
size | small | medium | "medium" | Visual height (24 / 32). Small is for dense places, such as entered items inside a field or tags in a table row. The hit area always meets the minimum target. A design system may add values. |
selected | boolean | false | Whether a filter chip is on. Ignored unless kind is filter. |
value | string | "" | What a component that holds the selection of a set of filter chips names this chip by: the Tag group's value and values (TGR-17). Unique within the set. Not drawn and not exposed; the chip itself does nothing with it. |
disabled | boolean | false | Prevents interaction and removes the chip, and its remove action, from the focus order. |
href | string | "" | The destination of an action chip: an address as the platform's links take one (a URL; on the web a path or a fragment as well). Not empty, it makes the chip a link and not a button: the link role, activated by pointer, touch or Enter and not by Space, opened by the platform as its own links are, and drawn exactly as the action chip it would otherwise be (CHP-33, CHP-34). Ignored unless kind is action: a filter chip holds a state and an input chip a second action (CHP-37). |
target | same | new | "same" | Where the destination opens. same: where the person is — the same tab on the web, the app's own handling of the address elsewhere. new: a new context — a new tab or window on the web, outside the current screen elsewhere — which the chip marks with the glyph open_in_new after its label and says through targetLabel (CHP-35). Ignored without href. |
targetLabel | string | "" | What assistive technology reads after the link's name while target is new ("opens in a new tab"). Tanrei ships no words of its own, so the product gives them in its own language, as it gives a chip its removeLabel. Required while target is new; ignored otherwise. |
label | string | "" | The visible text and the accessible name. |
removeLabel | string | "" | The accessible name of an input chip's remove action. It should name the item ("Remove Ada Lovelace"), because the remove action is a separate element. Required when kind is input; ignored otherwise. |
destructiveRemove | boolean | false | Whether an input chip's remove action reads as destructive: at rest it looks as it does without the flag; while it is hovered, keyboard-focused or pressed its glyph and state layer take the error color. Set it where removing the item loses something that cannot be put back in a step (an attachment, a recipient already invited); leave it off where the person can put the item back in one step (an applied filter, a search term). It changes color only: the remove action's name, glyph, size and behaviour are the same either way. Ignored unless kind is input. |
removable | boolean | true | Whether an input chip draws its remove action. False for an entry that cannot be taken away now (a read-only field's): no remove action is drawn, so none stands there doing nothing. Ignored unless kind is input. |
Slots
| Slot | Descripción |
|---|---|
icon | Leading icon (a glyph of the system's icon set). |
avatar | Leading image of an input chip. Ignored for other kinds. |
Eventos
| Evento | Descripción |
|---|---|
click | The chip itself was activated by pointer, touch, keyboard or assistive technology. Not emitted by the remove action. A link chip emits it before its destination opens; a product that takes the navigation itself (a client-side router) cancels it (CHP-34). |
change | A filter chip was activated; carries the new value of selected. |
remove | The user asked to remove an input chip, with its remove action or with Backspace or Delete. The chip does not remove itself. |
Estados
Comportamiento
Requisitos en formato EARS. Cada implementación de plataforma se prueba contra estos identificadores. El texto de los requisitos se muestra tal como está en la especificación, en inglés.
| ID | Requisito |
|---|---|
CHP-1 | WHEN the user activates the chip by pointer, touch, Enter or Space — a link chip (CHP-33) by pointer, touch or Enter — THE chip SHALL emit click exactly once. |
CHP-2 | WHILE disabled is true THE chip SHALL NOT emit click, change or remove, SHALL NOT be focusable, nor its remove action, and SHALL expose the disabled state to assistive technology. |
CHP-3 | WHILE hovered, keyboard-focused or pressed THE chip SHALL render its container, outline, label, icon, elevation and opacity from the component tokens of the highest-precedence active state, with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state. |
CHP-4 | WHEN the chip receives keyboard focus THE chip SHALL show the focus ring without animation; focus gained by pointer or touch SHALL NOT show it. |
CHP-5 | WHERE the visual size is below the minimum target THE chip SHALL extend its hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing its visual size; a platform that cannot tell the input type SHALL use sys.target.touch. |
CHP-6 | WHILE disabled is true THE chip SHALL render its container, outline, label, icon, remove action, elevation and opacity from the disabled component tokens of its variant and, for a filter chip, of its selection, and SHALL draw an avatar at sys.state.disabled-content-opacity. |
CHP-7 | WHEN variant or size names a value that the active design system does not have, or kind names a value this spec does not have, THE chip SHALL render and behave with the default value (kind action, and the default variant's or size's tokens), and in debug builds report the unknown value. |
CHP-8 | WHEN the chip is pressed by pointer, touch, Enter or Space THE chip SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner. |
CHP-9 | WHILE pressed THE chip SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; outline, label, icon, elevation, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.chip.motion.feedback-duration with comp.chip.motion.state-easing, fades over the state duration of its size (comp.chip.motion.state-duration.small or .medium) with comp.chip.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced. |
CHP-10 | THE chip SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README. |
CHP-11 | WHEN kind is filter and the user activates the chip THE chip SHALL emit click and then change with the opposite of selected, in that order (as a native checkbox does), and SHALL expose selected to assistive technology as pressed or not pressed; WHILE kind is not filter THE chip SHALL ignore selected and SHALL NOT expose a pressed state. |
CHP-12 | WHILE kind is filter and selected is true THE chip SHALL render its container, outline, label and icon from the selected parts of its variant (comp.chip.outlined.selected.container.color for outlined at rest, and so on); otherwise it SHALL render them from the variant's own parts (comp.chip.outlined.container.color, and so on). |
CHP-13 | WHILE kind is filter and selected is true THE chip SHALL show the glyph check of the system's icon set in the leading position, in place of its icon when it has one, and SHALL draw no mark of its own; WHEN selected changes THE chip SHALL show or hide the check, change its width with it, and change to or from the selected colors over comp.chip.motion.selection-duration with comp.chip.motion.selection-easing, and SHALL show the new condition at once where motion is reduced. |
CHP-14 | THE chip SHALL draw its icon, its check and its remove glyph at the icon size of its size (comp.chip.icon.size.medium for medium, and so on) and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, the icon and the remove glyph with sys.icon.weight and the check with comp.chip.check.weight (not sys.icon.weight: the check is a control's own mark, drawn on the selected fill to tell on from off, as the checkbox's is, CHK-12), the weight changing the stroke of the glyph only and never its box; the icon and the check SHALL take the family and fill of its selection (sys.icon.family.selected and sys.icon.fill.selected only while kind is filter and selected is true; otherwise sys.icon.family.unselected and sys.icon.fill.unselected) and the icon color of its look (comp.chip.outlined.icon.color, comp.chip.outlined.selected.icon.color, and so on); the remove glyph SHALL always be drawn filled, with sys.icon.family.selected and sys.icon.fill.selected, in the glyph color of the parts CHP-20 and CHP-27 name (comp.chip.outlined.destructive-remove.icon.color or comp.chip.outlined.remove.icon.color, and so on). |
CHP-15 | WHERE kind is input and an avatar is given THE chip SHALL draw it in the leading position, in place of an icon, as an image of the avatar size of its size (comp.chip.avatar.size.medium for medium, and so on) clipped to comp.chip.avatar.shape and hidden from assistive technology; WHERE kind is not input THE chip SHALL ignore an avatar and report it in debug builds. |
CHP-16 | THE chip SHALL draw a container at least the height of its size (comp.chip.container.height.medium for medium, and so on) with corners comp.chip.container.shape, never larger than half the container's height (a pill where the value is sys.shape.corner.full, at any height the chip grows to), and an outline comp.chip.outline.width wide inside its edge, and lay out in one row its leading icon, check or avatar, its label and its remove glyph, separated by comp.chip.container.gap.medium (and so on); each end SHALL be padded by comp.chip.container.padding-inline-with-icon.medium where it holds an icon or the check, by comp.chip.container.padding-inline-with-avatar.medium where it holds an avatar, by comp.chip.container.padding-inline-with-remove.medium where it holds the remove glyph, and by comp.chip.container.padding-inline.medium where the label meets it, and the row's tallest item (the label's line, a glyph's box or the avatar) SHALL be padded at the top and bottom by at least comp.chip.container.padding-block.medium (and so on for each size). The remove action's round container takes no part in this layout (CHP-18); where it lies follows from it (CHP-32). |
CHP-17 | THE chip SHALL set its label on one line in the text style of its size (comp.chip.label.typescale.medium, and so on) and the label color of its look, truncating it with an ellipsis only when the layout gives the chip less width than the label needs, and SHALL grow in height with larger text; the full label SHALL remain the accessible name. |
CHP-18 | WHERE kind is input THE chip SHALL draw a remove action at its inline end: the glyph cancel of the system's icon set, centred on a round container of the remove size of its size (comp.chip.remove.container.size.medium, and so on) with corners comp.chip.remove.container.shape. The round container is larger than the glyph and SHALL NOT take part in the layout of CHP-16: it reaches into the gap before the glyph and the padding after it, as far as CHP-32 says, without changing the chip's size. THE chip SHALL draw no mark of its own for it, and SHALL expose it as a separate element with the button role, named by removeLabel, that is not a stop in the Tab order: it is reached by pointer, touch and assistive technology, and from the keyboard through the chip itself, on which Backspace or Delete removes (CHP-19). WHEN the remove action is activated by pointer, touch, assistive technology, Enter or Space THE chip SHALL emit remove exactly once and SHALL NOT emit click. |
CHP-19 | WHEN kind is input and the chip itself has keyboard focus and the user presses Backspace or Delete THE chip SHALL emit remove exactly once, and SHALL NOT answer the repeats of a key that is held down, so that one press asks for one removal. WHILE kind is input, removable is true and disabled is false THE chip SHALL expose to assistive technology, on the chip itself, that Delete and Backspace remove it (the platform's keyboard-shortcut property where it has one: on the web aria-keyshortcuts="Delete Backspace"), so that a person who does not see the remove action, and who no longer meets it by Tab (CHP-18), learns the key. |
CHP-20 | WHILE the remove action is hovered, keyboard-focused or pressed THE chip SHALL render the remove action's container and glyph from the remove parts of the remove action's own highest-precedence state (comp.chip.outlined.remove.container.color at rest, and so on; the destructive-remove parts instead while destructiveRemove is true, CHP-27), with the precedence of CHP-3, SHALL keep the chip's container, outline, label and icon at the chip's own state (the chip is not hovered or pressed while the pointer or press is on the remove action), SHALL show the focus ring around the remove action's round container rather than around the chip, and SHALL answer a press of it as CHP-8 and CHP-9 name, within that round container. |
CHP-21 | WHERE kind is input THE chip SHALL give the remove action a hit area of at least sys.target.touch for touch input and sys.target.pointer for fine pointers on both axes, around its glyph, reaching toward the label no further than the gap before the glyph and extending outward, beyond the chip's visual bounds, as far as it needs — never over the label; the rest of the chip's hit area SHALL activate the chip. |
CHP-22 | WHEN the chip emits remove THE chip SHALL NOT remove itself or move focus: the owner removes it and moves focus to a neighbouring chip, or to the field the chips belong to. |
CHP-23 | THE chip SHALL be one tab stop — an input chip too: its remove action is not a stop (CHP-18), and Backspace or Delete on the chip removes it (CHP-19) — unless the component that holds it gives its set one stop and the keys to reach each chip (the chip field, CHF-11; a tag group that holds a selection, TGR-20) — and SHALL NOT handle arrow keys; moving between chips with arrow keys, choosing one or several filter chips of a set, and wrapping or scrolling a row belong to the layout that holds the chips. |
CHP-24 | WHEN the elevation or the colors of the chip change between states THE chip SHALL animate the change over the state duration of its size (comp.chip.motion.state-duration.small or .medium) with comp.chip.motion.state-easing, and SHALL change them at once where motion is reduced. |
CHP-25 | WHEN the layout direction is right-to-left THE chip SHALL mirror the order of its content and apply its paddings by logical start and end, so that the remove action sits at the left, and SHALL grow a ripple from the point of contact as in left-to-right. |
CHP-26 | WHILE label is not empty THE chip SHALL expose it as its accessible name, over a name the product gives it on the element (aria-label or aria-labelledby); WHILE label is empty and the product gives the chip a name of its own on the element — aria-label, or aria-labelledby naming an element — THE chip SHALL expose that name as its accessible name; WHILE label is empty and the product gives it none THE chip SHALL still render, and in debug builds report that it has no accessible name; WHILE kind is input and removeLabel is empty THE chip SHALL report the same of its remove action. |
CHP-27 | WHILE kind is input and destructiveRemove is true THE chip SHALL render the remove action's round container and glyph from the destructive-remove parts of its variant in the remove action's own state (comp.chip.outlined.destructive-remove.container.color and comp.chip.outlined.destructive-remove.icon.color at rest, and so on), whose hovered, focused and pressed container mixes comp.chip.outlined.destructive-remove.state-layer.color and whose hovered, focused and pressed glyph takes the error color (in the default system both are the error role); at rest and while disabled the remove action SHALL look as it does with destructiveRemove false. WHILE destructiveRemove is false THE chip SHALL render the remove action from the remove parts (CHP-20). WHERE kind is not input THE chip SHALL ignore destructiveRemove. |
CHP-28 | THE chip SHALL NOT make color the only sign that removing is destructive: whatever destructiveRemove is, the remove action SHALL keep the button role, its accessible name removeLabel ("Remove Ada Lovelace"), the glyph cancel, its size and its hit area, and SHALL announce nothing more and nothing less to assistive technology. |
CHP-29 | THE chip SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the chip is shown THE chip SHALL draw itself for the new direction at once, without a motion of its own, keeping its selection and its focus. |
CHP-30 | WHERE the layout direction is right-to-left THE chip SHALL draw the glyph of its icon slot mirrored left to right exactly when the system's icon set marks that glyph's name as mirrored or the product forces mirroring for that use, and unmirrored when the product forbids it: the icon helper mirrors the glyph inside its own box, about the box's vertical centre line, changing neither its place, size, color and fill nor the order CHP-25 gives. THE chip SHALL NOT mirror a glyph itself, and SHALL NOT mirror content the product gives as an image or a view of its own rather than by a glyph's name. The check, remove and cancel glyphs the chip draws itself are not marked and are never mirrored. |
CHP-31 | THE chip SHALL lay out its label as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right word, a number with its sign or unit, a telephone number and an address keep their own order in a right-to-left layout and reorder nothing beside them; THE chip SHALL still place the label and align its lines by the layout direction, not by the text's own, and SHALL cut a label that does not fit (CHP-17) at the end of its own direction, so that a left-to-right label in a right-to-left layout loses its right end and never its beginning. |
CHP-32 | WHERE kind is input THE chip SHALL center the remove action's round container on the remove glyph, on the chip's midline, so that it lies from the chip's inline end comp.chip.container.padding-inline-with-remove.medium less half of what comp.chip.remove.container.size.medium exceeds comp.chip.icon.size.medium by (and so on for each size), and never less than nothing; the default system's values SHALL make that distance the same as the round container's distance from the chip's top and from its bottom at the height of its size, so that the round container is inset equally on three sides, its center is the center of the chip's round end, and the two curves are concentric, as an avatar's and the round end's are at the other end. The hover, focus and press of the remove action (CHP-20) and its focus ring SHALL be drawn in that same place. |
CHP-33 | WHILE kind is action and href is not empty THE chip SHALL be a link and not a button: it SHALL expose the link role, named by label, with no pressed state; SHALL be the platform's own link to href (the web's anchor element; SwiftUI's Link; on Compose, Flutter and React Native an element with the platform's link semantics whose address is opened by the platform's opener), so that whatever the platform gives a link — on the web its context menu, opening in a new tab or window, copying and dragging its address, and the address shown before it is followed — is the platform's, and not the chip's to draw or to take over; and SHALL draw its container, outline, label, icon, elevation and opacity in every state from the same tokens as an action chip of its variant and size that has no destination, with no look of its own for a link and none for a destination already visited. |
CHP-34 | WHEN the user activates a link chip by pointer, touch or Enter THE chip SHALL emit click exactly once and then open href where target names, unless the product cancelled that click, in which case it SHALL open nothing: the product's own router has taken the navigation. It SHALL show the pressed state as CHP-8 and CHP-9 say and SHALL NOT hold the navigation back for sys.motion.duration.press-hold. THE chip SHALL NOT activate a link chip on Space, which on the web scrolls the page as it does on any link, and SHALL NOT show the pressed state for it; WHERE the platform gives its links other keys or gestures (on the web a modified or a middle click that opens a new tab, on Apple platforms a long press that previews) THE chip SHALL leave them to the platform. |
CHP-35 | WHILE the chip is a link and target is new THE chip SHALL open href in a new context — on the web a new tab or window that is given no handle to the page that opened it; on the other platforms outside the screen the person is on, as the platform's opener decides — and SHALL draw the glyph open_in_new of the system's icon set at its inline end, after the label, where CHP-16 lays out an input chip's remove glyph: comp.chip.container.gap.medium from the label, at comp.chip.icon.size.medium, with that end padded by comp.chip.container.padding-inline-with-icon.medium at the medium size (and each of its own size otherwise); in the icon color of its look and state (comp.chip.outlined.icon.color for outlined at rest, and so on); through the icon helper, which mirrors it in a right-to-left layout because the icon set marks its name; and hidden from assistive technology. WHILE target is new THE chip SHALL expose targetLabel as its description, read after its name and role, and WHILE targetLabel is empty SHALL still render and in debug builds report that a link that opens a new context does not say so. WHILE target is same THE chip SHALL draw no mark and SHALL ignore targetLabel. |
CHP-36 | WHILE kind is action and href is not empty and disabled is true THE chip SHALL NOT be a link that can be followed: it SHALL render as CHP-6 says, the mark of CHP-35 in the disabled icon color, SHALL expose the link role with the disabled state and no destination, SHALL NOT be focusable, SHALL NOT emit click, and SHALL open nothing by any means the platform gives a link (on the web the anchor carries no href, so there is no context menu entry, no drag and no new tab for it). |
CHP-37 | WHILE kind is filter or input THE chip SHALL ignore href, target and targetLabel and stay the chip its kind makes it, and in debug builds SHALL report that only an action chip can be a link: a control that holds a state, or that carries a second action, is not a destination. WHEN target names a value the chip does not define THE chip SHALL behave as same, and in debug builds report the unknown value. IF href is only white space, or names a script to run rather than a place to go (the web's javascript: scheme), or cannot be read as an address by the platform, THE chip SHALL be an action chip without a destination, and in the last two cases report it in debug builds. |
CHP-38 | WHILE kind is input and removable is false THE chip SHALL draw no remove action, SHALL have no stop for one and SHALL emit no remove, and SHALL keep the padding of a chip without one. WHILE kind is not input THE chip SHALL ignore removable. |
CHP-39 | WHEN a pointer or touch press lands on an input chip anywhere but on its remove action THE chip SHALL NOT let that press give the remove action focus: focus SHALL go where the platform puts it for a press on a button — to the chip itself where a pressed button takes focus, and nowhere in the chip where it takes none — so that the next Enter or Space activates the chip and never removes it. THE remove action SHALL still take focus when it is pressed itself or moved to by assistive technology or by the product, and the chip SHALL keep the Tab order of CHP-23. |
CHP-40 | WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE chip SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the chip is invalid — except those the chip owns (aria-pressed, aria-disabled), which it SHALL move and not expose. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE chip SHALL take it off that element. WHEN the product sets an aria- attribute the chip owns THE chip SHALL report it in debug builds. |
Correspondencia de nombres por plataforma
Paridad no significa API idénticas. Cada plataforma expresa el mismo contrato con su propio estilo.
| Especificación | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| Componente | tanrei-chip | TanreiChip | TanreiChip | TanreiChip | Chip |
kind · Propiedad | kind | isSelected / onRemove | onSelectedChange / onRemove | TanreiChip / TanreiChip.filter / TanreiChip.input | kind |
variant · Propiedad | variant | variant | variant | variant | variant |
size · Propiedad | size | size | size | size | size |
selected · Propiedad | selected | isSelected | selected | selected | selected |
value · Propiedad | value | value | value | value | value |
disabled · Propiedad | disabled | disabled | enabled | isEnabled | disabled |
href · Propiedad | href | destination | href | href | href |
target · Propiedad | target | target | target | target | target |
targetLabel · Propiedad | targetLabel | targetLabel | targetLabel | targetSemanticLabel | targetLabel |
label · Propiedad | label | title | label | label | label |
removeLabel · Propiedad | removeLabel | removeLabel | removeContentDescription | removeSemanticLabel | removeAccessibilityLabel |
destructiveRemove · Propiedad | destructiveRemove | destructiveRemove | destructiveRemove | destructiveRemove | destructiveRemove |
removable · Propiedad | removable | removable | removable | removable | removable |
click · Evento | click | action | onClick | onPressed | onPress |
change · Evento | change | isSelected | onSelectedChange | onSelected | onSelectedChange |
remove · Evento | remove | onRemove | onRemove | onDeleted | onRemove |
| Notas | removeLabel is reflected as the remove-label attribute. destructiveRemove is a boolean property that defaults to false, reflected as the destructive-remove attribute. The icon is the icon slot and the avatar the avatar slot. A filter chip switches its own selected and fires change, as a toggle Button does; remove is a custom event and the element stays in the DOM until the page removes it. With href an action chip's shadow root holds an <a> in place of its <button>, with the same classes, parts and listeners. The link form: href is the href attribute; target is the target attribute with the values same and new (the HTML spellings _self and _blank are read as those two; anything else is same and reported); targetLabel is the target-label attribute. Web-only, forwarded to the anchor and to nothing else: rel (to which new adds noopener) and download. Cancelling click (preventDefault()) cancels the navigation, which is how a client-side router takes it; a modified or a middle click is the browser's. A disabled link is the anchor without href, with role="link" and aria-disabled="true", as the navigation drawer's destination already is. Space is not handed to the press controller. element.click() follows the link. removable is a boolean property that defaults to true; its attribute is the inverse, not-removable, because an HTML boolean attribute cannot default to true. The remove action's <button> has tabindex="-1" (CHP-18): pressable by pointer and assistive technology, focusable by focus(), passed by Tab; while the chip removes, its own button or link carries aria-keyshortcuts="Delete Backspace" (CHP-19). A component that holds chips as a set and gives the set one stop (CHP-23, the chip field) takes each chip and its remove action out of the Tab order in the way the toolbar holds its Buttons. A mouse press anywhere on an input chip but its remove action takes the remove action's tabindex away until that press has placed focus (CHP-39): Safari on macOS gives a pressed <button> no focus and delegates the press to the first element with a tabindex in the shadow root, which would otherwise be the remove action. | Kind is chosen by initializer: init(_:action:) is an action chip, init(_:isSelected:) (a Binding<Bool>) a filter chip, init(_:removeLabel:destructiveRemove:action:onRemove:) an input chip, with destructiveRemove defaulting to false. The remove action is a second Button placed beside the chip's own, never inside it, so VoiceOver reaches it as its own element. disabled follows .disabled(_:). The link form, not built on this platform yet: the initializer init(_:destination:), which takes a URL in place of action: (the filter and input initializers take none) draws the same control as a SwiftUI Link, so the address is opened by the environment's openURL — an app that routes addresses itself provides an OpenURLAction, which is how the navigation is cancelled — and VoiceOver reads the link trait. target: TanreiLinkTarget = .same and targetLabel (the accessibility hint) are parameters of that initializer alone. Not built on this platform yet: the remove action out of the focus order, with the keys of CHP-19 told to assistive technology — here it is still a second stop after the chip (CHP-18, CHP-19, CHP-23); removable, default true — an input chip that draws no remove action while it is false (CHP-38); and a holder that gives a set of chips one stop takes each chip's own stops away (CHP-23). Lagging behind CHP-14 (the check drawn at comp.chip.check.weight): its check is drawn at sys.icon.weight. | Kind is chosen by overload: onClick alone is an action chip, selected + onSelectedChange a filter chip, onClick + onRemove an input chip. enabled is the inverse flag. The remove action is its own semantics node with Role.Button. The link form, not built on this platform yet: the action overload with href: String (the filter and input overloads take none) opens the address through LocalUriHandler.current after onClick; an app that routes addresses itself provides its own UriHandler. Compose has no link role for a clickable element (only link annotations inside text), so the node drops Role.Button and carries no role, and the README says so. target: TanreiLinkTarget = TanreiLinkTarget.Same; targetLabel is appended to the node's state description. Not built on this platform yet: the remove action out of the focus order, with the keys of CHP-19 told to assistive technology — here it is still a second stop after the chip (CHP-18, CHP-19, CHP-23); removable, default true — an input chip that draws no remove action while it is false (CHP-38); and a holder that gives a set of chips one stop takes each chip's own stops away (CHP-23). Lagging behind CHP-14 (the check drawn at comp.chip.check.weight): its check is drawn at sys.icon.weight. | Kind is chosen by constructor: the default constructor is an action chip, .filter a filter chip, .input an input chip (Flutter's own FilterChip and InputChip names for the callbacks). isEnabled: false disables it, as Flutter's chips do. The remove action is its own Semantics node with the button flag. The link form, not built on this platform yet: the TanreiChip.link constructor (href is a Uri) has Semantics(link: true) with the address as its linkUrl. The package has no plugin dependency, so the address is opened by the nearest TanreiLinkOpener, an inherited widget the app provides once (calling url_launcher, or its own router); without one the control opens nothing and reports it in debug builds. target is a TanreiLinkTarget; targetSemanticLabel is the semantics hint. Not built on this platform yet: the remove action out of the focus order, with the keys of CHP-19 told to assistive technology — here it is still a second stop after the chip (CHP-18, CHP-19, CHP-23); removable, default true — an input chip that draws no remove action while it is false (CHP-38); and a holder that gives a set of chips one stop takes each chip's own stops away (CHP-23). Lagging behind CHP-14 (the check drawn at comp.chip.check.weight): its check is drawn at sys.icon.weight. | The icon is the icon prop (a glyph name) and the avatar the avatar prop (an image source). The remove action is a second accessible Pressable with the button role, placed beside the chip's own rather than inside it, so a screen reader reaches it as its own element. The link form, not built on this platform yet: an action Chip with href has accessibilityRole="link" and opens the address with Linking.openURL after onPress, unless onPress called event.preventDefault(). target is "same" | "new"; targetLabel is the accessibilityHint. Not built on this platform yet: the remove action out of the focus order, with the keys of CHP-19 told to assistive technology — here it is still a second stop after the chip (CHP-18, CHP-19, CHP-23); removable, default true — an input chip that draws no remove action while it is false (CHP-38); and a holder that gives a set of chips one stop takes each chip's own stops away (CHP-23). Lagging behind CHP-14 (the check drawn at comp.chip.check.weight): its check is drawn at sys.icon.weight. |
Tokens
| Token | Alias de | Valor resuelto (claro) |
|---|---|---|
--tanrei-comp-chip-avatar-shape | sys.shape.corner.full | 9999px |
--tanrei-comp-chip-avatar-size-medium | — | 24px |
--tanrei-comp-chip-avatar-size-small | — | 16px |
--tanrei-comp-chip-check-weight | sys.icon.mark.weight | 500 |
--tanrei-comp-chip-container-gap-medium | sys.space.space100 | 8px |
--tanrei-comp-chip-container-gap-small | sys.space.space50 | 4px |
--tanrei-comp-chip-container-height-medium | — | 32px |
--tanrei-comp-chip-container-height-small | — | 24px |
--tanrei-comp-chip-container-padding-block-medium | — | 4px |
--tanrei-comp-chip-container-padding-block-small | sys.space.space25 | 2px |
--tanrei-comp-chip-container-padding-inline-with-avatar-medium | sys.space.space50 | 4px |
--tanrei-comp-chip-container-padding-inline-with-avatar-small | sys.space.space50 | 4px |
--tanrei-comp-chip-container-padding-inline-with-icon-medium | sys.space.space100 | 8px |
--tanrei-comp-chip-container-padding-inline-with-icon-small | sys.space.space75 | 6px |
--tanrei-comp-chip-container-padding-inline-with-remove-medium | sys.space.space50 | 4px |
--tanrei-comp-chip-container-padding-inline-with-remove-small | sys.space.space25 | 2px |
--tanrei-comp-chip-container-padding-inline-medium | sys.space.space200 | 16px |
--tanrei-comp-chip-container-padding-inline-small | sys.space.space100 | 8px |
--tanrei-comp-chip-container-shape | sys.shape.corner.full | 9999px |
--tanrei-comp-chip-disabled-opacity | — | 1 |
--tanrei-comp-chip-elevated-container-color | sys.color.surface-container-lowest | |
--tanrei-comp-chip-elevated-container-elevation | sys.elevation.level2 | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-comp-chip-elevated-destructive-remove-container-color | — | |
--tanrei-comp-chip-elevated-destructive-remove-icon-color | comp.chip.elevated.remove.icon.color | |
--tanrei-comp-chip-elevated-destructive-remove-state-layer-color | sys.color.error | |
--tanrei-comp-chip-elevated-disabled-container-color | — | |
--tanrei-comp-chip-elevated-disabled-container-elevation | — | |
--tanrei-comp-chip-elevated-disabled-destructive-remove-container-color | — | |
--tanrei-comp-chip-elevated-disabled-destructive-remove-icon-color | — | |
--tanrei-comp-chip-elevated-disabled-destructive-remove-state-layer-color | — | |
--tanrei-comp-chip-elevated-disabled-icon-color | — | |
--tanrei-comp-chip-elevated-disabled-label-color | — | |
--tanrei-comp-chip-elevated-disabled-outline-color | — | |
--tanrei-comp-chip-elevated-disabled-remove-container-color | — | |
--tanrei-comp-chip-elevated-disabled-remove-icon-color | — | |
--tanrei-comp-chip-elevated-disabled-remove-state-layer-color | — | |
--tanrei-comp-chip-elevated-disabled-selected-container-color | — | |
--tanrei-comp-chip-elevated-disabled-selected-container-elevation | — | |
--tanrei-comp-chip-elevated-disabled-selected-icon-color | — | |
--tanrei-comp-chip-elevated-disabled-selected-label-color | — | |
--tanrei-comp-chip-elevated-disabled-selected-outline-color | — | |
--tanrei-comp-chip-elevated-disabled-selected-state-layer-color | — | |
--tanrei-comp-chip-elevated-disabled-state-layer-color | — | |
--tanrei-comp-chip-elevated-focused-container-color | — | |
--tanrei-comp-chip-elevated-focused-container-elevation | — | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-comp-chip-elevated-focused-destructive-remove-container-color | — | |
--tanrei-comp-chip-elevated-focused-destructive-remove-icon-color | — | |
--tanrei-comp-chip-elevated-focused-destructive-remove-state-layer-color | — | |
--tanrei-comp-chip-elevated-focused-icon-color | — | |
--tanrei-comp-chip-elevated-focused-label-color | — | |
--tanrei-comp-chip-elevated-focused-outline-color | — | |
--tanrei-comp-chip-elevated-focused-remove-container-color | — | |
--tanrei-comp-chip-elevated-focused-remove-icon-color | — | |
--tanrei-comp-chip-elevated-focused-remove-state-layer-color | — | |
--tanrei-comp-chip-elevated-focused-selected-container-color | — | |
--tanrei-comp-chip-elevated-focused-selected-container-elevation | — | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-comp-chip-elevated-focused-selected-icon-color | — | |
--tanrei-comp-chip-elevated-focused-selected-label-color | — | |
--tanrei-comp-chip-elevated-focused-selected-outline-color | — | |
--tanrei-comp-chip-elevated-focused-selected-state-layer-color | — | |
--tanrei-comp-chip-elevated-focused-state-layer-color | — | |
--tanrei-comp-chip-elevated-hovered-container-color | — | |
--tanrei-comp-chip-elevated-hovered-container-elevation | — | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 1px 0px rgb(0 0 0 / 0.04), 0px 4px 8px -4px rgb(0 0 0 / 0.04), 0px 16px 24px -8px rgb(0 0 0 / 0.06) |
--tanrei-comp-chip-elevated-hovered-destructive-remove-container-color | — | |
--tanrei-comp-chip-elevated-hovered-destructive-remove-icon-color | — | |
--tanrei-comp-chip-elevated-hovered-destructive-remove-state-layer-color | — | |
--tanrei-comp-chip-elevated-hovered-icon-color | — | |
--tanrei-comp-chip-elevated-hovered-label-color | — | |
--tanrei-comp-chip-elevated-hovered-outline-color | — | |
--tanrei-comp-chip-elevated-hovered-remove-container-color | — | |
--tanrei-comp-chip-elevated-hovered-remove-icon-color | — | |
--tanrei-comp-chip-elevated-hovered-remove-state-layer-color | — | |
--tanrei-comp-chip-elevated-hovered-selected-container-color | — | |
--tanrei-comp-chip-elevated-hovered-selected-container-elevation | — | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 1px 0px rgb(0 0 0 / 0.04), 0px 4px 8px -4px rgb(0 0 0 / 0.04), 0px 16px 24px -8px rgb(0 0 0 / 0.06) |
--tanrei-comp-chip-elevated-hovered-selected-icon-color | — | |
--tanrei-comp-chip-elevated-hovered-selected-label-color | — | |
--tanrei-comp-chip-elevated-hovered-selected-outline-color | — | |
--tanrei-comp-chip-elevated-hovered-selected-state-layer-color | — | |
--tanrei-comp-chip-elevated-hovered-state-layer-color | — | |
--tanrei-comp-chip-elevated-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-chip-elevated-label-color | sys.color.on-surface | |
--tanrei-comp-chip-elevated-outline-color | — | |
--tanrei-comp-chip-elevated-pressed-container-color | — | |
--tanrei-comp-chip-elevated-pressed-container-elevation | — | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-comp-chip-elevated-pressed-destructive-remove-container-color | — | |
--tanrei-comp-chip-elevated-pressed-destructive-remove-icon-color | — | |
--tanrei-comp-chip-elevated-pressed-destructive-remove-state-layer-color | — | |
--tanrei-comp-chip-elevated-pressed-icon-color | — | |
--tanrei-comp-chip-elevated-pressed-label-color | — | |
--tanrei-comp-chip-elevated-pressed-outline-color | — | |
--tanrei-comp-chip-elevated-pressed-remove-container-color | — | |
--tanrei-comp-chip-elevated-pressed-remove-icon-color | — | |
--tanrei-comp-chip-elevated-pressed-remove-state-layer-color | — | |
--tanrei-comp-chip-elevated-pressed-selected-container-color | — | |
--tanrei-comp-chip-elevated-pressed-selected-container-elevation | — | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-comp-chip-elevated-pressed-selected-icon-color | — | |
--tanrei-comp-chip-elevated-pressed-selected-label-color | — | |
--tanrei-comp-chip-elevated-pressed-selected-outline-color | — | |
--tanrei-comp-chip-elevated-pressed-selected-state-layer-color | — | |
--tanrei-comp-chip-elevated-pressed-state-layer-color | — | |
--tanrei-comp-chip-elevated-remove-container-color | — | |
--tanrei-comp-chip-elevated-remove-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-chip-elevated-remove-state-layer-color | comp.chip.elevated.remove.icon.color | |
--tanrei-comp-chip-elevated-selected-container-color | sys.color.secondary-container | |
--tanrei-comp-chip-elevated-selected-container-elevation | sys.elevation.level2 | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-comp-chip-elevated-selected-icon-color | sys.color.on-secondary-container | |
--tanrei-comp-chip-elevated-selected-label-color | sys.color.on-secondary-container | |
--tanrei-comp-chip-elevated-selected-outline-color | — | |
--tanrei-comp-chip-elevated-selected-state-layer-color | comp.chip.elevated.selected.label.color | |
--tanrei-comp-chip-elevated-state-layer-color | comp.chip.elevated.label.color | |
--tanrei-comp-chip-focused-opacity | — | 1 |
--tanrei-comp-chip-hovered-opacity | — | 1 |
--tanrei-comp-chip-icon-size-medium | sys.icon.medium | 24px |
--tanrei-comp-chip-icon-size-small | sys.icon.small | 20px |
--tanrei-comp-chip-motion-feedback-duration | sys.motion.role.feedback | 450ms |
--tanrei-comp-chip-motion-selection-duration | sys.motion.role.selection.mark | 250ms |
--tanrei-comp-chip-motion-selection-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-chip-motion-state-duration-medium | sys.motion.role.state.default | 250ms |
--tanrei-comp-chip-motion-state-duration-small | sys.motion.role.state.compact | 200ms |
--tanrei-comp-chip-motion-state-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-chip-outline-width | sys.border.hairline | 1px |
--tanrei-comp-chip-outlined-container-color | — | |
--tanrei-comp-chip-outlined-container-elevation | sys.elevation.level0 | |
--tanrei-comp-chip-outlined-destructive-remove-container-color | — | |
--tanrei-comp-chip-outlined-destructive-remove-icon-color | comp.chip.outlined.remove.icon.color | |
--tanrei-comp-chip-outlined-destructive-remove-state-layer-color | sys.color.error | |
--tanrei-comp-chip-outlined-disabled-container-color | — | |
--tanrei-comp-chip-outlined-disabled-container-elevation | — | |
--tanrei-comp-chip-outlined-disabled-destructive-remove-container-color | — | |
--tanrei-comp-chip-outlined-disabled-destructive-remove-icon-color | — | |
--tanrei-comp-chip-outlined-disabled-destructive-remove-state-layer-color | — | |
--tanrei-comp-chip-outlined-disabled-icon-color | — | |
--tanrei-comp-chip-outlined-disabled-label-color | — | |
--tanrei-comp-chip-outlined-disabled-outline-color | — | |
--tanrei-comp-chip-outlined-disabled-remove-container-color | — | |
--tanrei-comp-chip-outlined-disabled-remove-icon-color | — | |
--tanrei-comp-chip-outlined-disabled-remove-state-layer-color | — | |
--tanrei-comp-chip-outlined-disabled-selected-container-color | — | |
--tanrei-comp-chip-outlined-disabled-selected-container-elevation | — | |
--tanrei-comp-chip-outlined-disabled-selected-icon-color | — | |
--tanrei-comp-chip-outlined-disabled-selected-label-color | — | |
--tanrei-comp-chip-outlined-disabled-selected-outline-color | — | |
--tanrei-comp-chip-outlined-disabled-selected-state-layer-color | — | |
--tanrei-comp-chip-outlined-disabled-state-layer-color | — | |
--tanrei-comp-chip-outlined-focused-container-color | — | |
--tanrei-comp-chip-outlined-focused-container-elevation | — | |
--tanrei-comp-chip-outlined-focused-destructive-remove-container-color | — | |
--tanrei-comp-chip-outlined-focused-destructive-remove-icon-color | — | |
--tanrei-comp-chip-outlined-focused-destructive-remove-state-layer-color | — | |
--tanrei-comp-chip-outlined-focused-icon-color | — | |
--tanrei-comp-chip-outlined-focused-label-color | — | |
--tanrei-comp-chip-outlined-focused-outline-color | — | |
--tanrei-comp-chip-outlined-focused-remove-container-color | — | |
--tanrei-comp-chip-outlined-focused-remove-icon-color | — | |
--tanrei-comp-chip-outlined-focused-remove-state-layer-color | — | |
--tanrei-comp-chip-outlined-focused-selected-container-color | — | |
--tanrei-comp-chip-outlined-focused-selected-container-elevation | — | |
--tanrei-comp-chip-outlined-focused-selected-icon-color | — | |
--tanrei-comp-chip-outlined-focused-selected-label-color | — | |
--tanrei-comp-chip-outlined-focused-selected-outline-color | — | |
--tanrei-comp-chip-outlined-focused-selected-state-layer-color | — | |
--tanrei-comp-chip-outlined-focused-state-layer-color | — | |
--tanrei-comp-chip-outlined-hovered-container-color | — | |
--tanrei-comp-chip-outlined-hovered-container-elevation | — | |
--tanrei-comp-chip-outlined-hovered-destructive-remove-container-color | — | |
--tanrei-comp-chip-outlined-hovered-destructive-remove-icon-color | — | |
--tanrei-comp-chip-outlined-hovered-destructive-remove-state-layer-color | — | |
--tanrei-comp-chip-outlined-hovered-icon-color | — | |
--tanrei-comp-chip-outlined-hovered-label-color | — | |
--tanrei-comp-chip-outlined-hovered-outline-color | — | |
--tanrei-comp-chip-outlined-hovered-remove-container-color | — | |
--tanrei-comp-chip-outlined-hovered-remove-icon-color | — | |
--tanrei-comp-chip-outlined-hovered-remove-state-layer-color | — | |
--tanrei-comp-chip-outlined-hovered-selected-container-color | — | |
--tanrei-comp-chip-outlined-hovered-selected-container-elevation | — | |
--tanrei-comp-chip-outlined-hovered-selected-icon-color | — | |
--tanrei-comp-chip-outlined-hovered-selected-label-color | — | |
--tanrei-comp-chip-outlined-hovered-selected-outline-color | — | |
--tanrei-comp-chip-outlined-hovered-selected-state-layer-color | — | |
--tanrei-comp-chip-outlined-hovered-state-layer-color | — | |
--tanrei-comp-chip-outlined-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-chip-outlined-label-color | sys.color.on-surface | |
--tanrei-comp-chip-outlined-outline-color | sys.color.outline-variant | |
--tanrei-comp-chip-outlined-pressed-container-color | — | |
--tanrei-comp-chip-outlined-pressed-container-elevation | — | |
--tanrei-comp-chip-outlined-pressed-destructive-remove-container-color | — | |
--tanrei-comp-chip-outlined-pressed-destructive-remove-icon-color | — | |
--tanrei-comp-chip-outlined-pressed-destructive-remove-state-layer-color | — | |
--tanrei-comp-chip-outlined-pressed-icon-color | — | |
--tanrei-comp-chip-outlined-pressed-label-color | — | |
--tanrei-comp-chip-outlined-pressed-outline-color | — | |
--tanrei-comp-chip-outlined-pressed-remove-container-color | — | |
--tanrei-comp-chip-outlined-pressed-remove-icon-color | — | |
--tanrei-comp-chip-outlined-pressed-remove-state-layer-color | — | |
--tanrei-comp-chip-outlined-pressed-selected-container-color | — | |
--tanrei-comp-chip-outlined-pressed-selected-container-elevation | — | |
--tanrei-comp-chip-outlined-pressed-selected-icon-color | — | |
--tanrei-comp-chip-outlined-pressed-selected-label-color | — | |
--tanrei-comp-chip-outlined-pressed-selected-outline-color | — | |
--tanrei-comp-chip-outlined-pressed-selected-state-layer-color | — | |
--tanrei-comp-chip-outlined-pressed-state-layer-color | — | |
--tanrei-comp-chip-outlined-remove-container-color | — | |
--tanrei-comp-chip-outlined-remove-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-chip-outlined-remove-state-layer-color | comp.chip.outlined.remove.icon.color | |
--tanrei-comp-chip-outlined-selected-container-color | sys.color.secondary-container | |
--tanrei-comp-chip-outlined-selected-container-elevation | sys.elevation.level0 | |
--tanrei-comp-chip-outlined-selected-icon-color | sys.color.on-secondary-container | |
--tanrei-comp-chip-outlined-selected-label-color | sys.color.on-secondary-container | |
--tanrei-comp-chip-outlined-selected-outline-color | — | |
--tanrei-comp-chip-outlined-selected-state-layer-color | comp.chip.outlined.selected.label.color | |
--tanrei-comp-chip-outlined-state-layer-color | comp.chip.outlined.label.color | |
--tanrei-comp-chip-pressed-opacity | — | 1 |
--tanrei-comp-chip-remove-container-shape | sys.shape.corner.full | 9999px |
--tanrei-comp-chip-remove-container-size-medium | — | 28px |
--tanrei-comp-chip-remove-container-size-small | — | 24px |
--tanrei-comp-chip-label-typescale-medium | sys.typescale.label | 500 14px/1.4286 |
--tanrei-comp-chip-label-typescale-small | sys.typescale.label-small | 500 12px/1.3333 |
Fixtures
Representaciones canónicas. Todas las plataformas capturan cada fixture con el mismo identificador para poder comparar los resultados.
variant: outlined (19)
action-outlined
kind: action variant: outlined label: Add to calendar action-small
kind: action size: small label: Add to calendar action-no-icon
kind: action label: Sounds good action-disabled
kind: action disabled: true label: Add to calendar filter-unselected
kind: filter selected: false label: Vegetarian filter-selected
kind: filter selected: true label: Vegetarian filter-selected-small
kind: filter size: small selected: true label: Vegetarian filter-selected-disabled
kind: filter selected: true disabled: true label: Vegetarian input
kind: input label: Ada Lovelace removeLabel: Remove Ada Lovelace input-avatar
kind: input label: Ada Lovelace removeLabel: Remove Ada Lovelace input-small
kind: input size: small label: Ada Lovelace removeLabel: Remove Ada Lovelace input-disabled
kind: input disabled: true label: Ada Lovelace removeLabel: Remove Ada Lovelace input-destructive-remove
kind: input label: Ada Lovelace removeLabel: Remove Ada Lovelace destructiveRemove: true input-plain-remove
kind: input label: Ada Lovelace removeLabel: Remove Ada Lovelace destructiveRemove: false action-link
kind: action href: /calendar/ label: Open in calendar action-link-new
kind: action href: https://example.com/tanrei target: new targetLabel: opens in a new tab label: Open in calendar action-link-new-small
kind: action size: small href: https://example.com/tanrei target: new targetLabel: opens in a new tab label: Open in calendar action-link-new-rtl
kind: action href: https://example.com/tanrei target: new targetLabel: opens in a new tab label: Open in calendar direction: rtl action-link-new-disabled
kind: action disabled: true href: https://example.com/tanrei target: new targetLabel: opens in a new tab label: Open in calendar variant: elevated (3)
action-elevated
kind: action variant: elevated label: Add to calendar filter-elevated-unselected
kind: filter variant: elevated selected: false label: Vegetarian filter-elevated-selected
kind: filter variant: elevated selected: true label: Vegetarian Generado a partir de specs/chip.spec.json, tokens/comp/chip.tokens.json, design/tokens/
Usa chips para elecciones pequeñas y relacionadas que se muestran en una fila: los filtros encima de una lista, las respuestas sugeridas bajo un mensaje, los destinatarios de un correo. Un botón pesa demasiado para una fila de diez, una casilla de verificación se lee como parte de un formulario, y una insignia o un tag no se pueden pulsar.
kind decide qué hace el chip, su rol y sus partes. No cambia el aspecto.
| Tipo | Qué es | Úsalo para |
|---|---|---|
| Action (predeterminado) | Un botón o, con href, un enlace |
Una acción de asistencia ligada al contenido, como «Añadir al calendario» junto a una fecha, o una sugerencia, como la respuesta «Me parece bien». Con un destino, un atajo a una página relacionada. |
| Filter | Un botón que está activado o desactivado | Acotar una lista: «Vegetariano», «Menos de 30 min». Cuando está activado, muestra una marca de verificación y los colores de seleccionado. |
| Input | Un elemento que la persona introdujo, con una acción de quitar | Destinatarios, etiquetas, términos de búsqueda. Puede mostrar un avatar en lugar de un icono. |
Material Design 3 tiene cuatro familias de chips. Tanrei cuenta tres tipos: sus chips de asistencia y de sugerencia son ambos botones con una etiqueta y un icono opcional, así que los dos son del tipo action. Un sistema de diseño que quiera que las sugerencias se vean más discretas añade su propia variante para ellas.
| Variante | Úsala para |
|---|---|
| Outlined (predeterminada) | Chips sobre una superficie lisa. El borde es la línea fina: separa el chip con discreción, y la etiqueta lleva el significado. |
| Elevated | Chips sobre una foto, un mapa o un fondo recargado, donde un borde por sí solo se perdería. |
Usa medium (32) para la mayoría de los chips, y small (24) en lugares densos, como los elementos introducidos dentro de un campo o los filtros encima de una tabla. Un rótulo estático en una fila de tabla es un tag. Los dos tamaños cumplen el objetivo mínimo.
Un chip es un control: se pulsa, se conmuta o se quita, recibe el foco y tiene estados. Un tag es un rótulo estático sobre un elemento, como un estado o una categoría, y nunca responde a un puntero. Una insignia es un punto o un recuento unido a la esquina de otro elemento.
- Si se pulsa, se selecciona o se quita, usa un chip.
- Si solo dice algo sobre el elemento en el que está, usa un tag.
- Si es un número o un punto encima de otra cosa, usa una insignia.
No uses como rótulo un chip que no hace nada, y no deshabilites un chip para convertirlo en uno.
Un control con destino es un enlace. Un chip de acción que solo lleva a la persona a algún sitio recibe href, y entonces es un enlace real y no un botón: en la web, un ancla, que se puede abrir en una pestaña nueva y cuya dirección se puede copiar. Se ve exactamente igual que un chip de acción en todos los estados, y no hay estado visitado.
- Enter sigue un chip de enlace. Espacio no: hace lo mismo que en cualquier enlace.
clickse emite primero, y después se abre el destino. Cancela el clic para encargarte tú de la navegación, como hace un enrutador del lado del cliente.- Con
targetennew, el chip muestra el glifoopen_in_newdespués de su etiqueta, y necesitatargetLabel, las palabras que se leen después de su nombre, como «se abre en una pestaña nueva». Tanrei no incluye textos propios. - Un chip de enlace deshabilitado no se puede seguir y sale del orden del foco.
- Solo un chip de acción puede ser un enlace. Un chip de filtro guarda un estado y un chip de entrada lleva una segunda acción, así que ambos ignoran
href, y las compilaciones de depuración lo notifican.
Un chip de entrada termina con una acción de quitar: el glifo cancel con relleno sobre un contenedor redondo un poco mayor que él, que se ve como un anillo alrededor del glifo al pasar el cursor, con el foco y al pulsar. En el sistema predeterminado, el contenedor redondo es concéntrico con el extremo redondeado del chip, y queda tan lejos del extremo como de la parte superior y de la inferior. No ocupa espacio propio, así que no hace el chip más ancho ni más alto. La acción de quitar es un botón aparte con su propio nombre, sus propios estados al pasar el cursor, de foco y de pulsación, y su propia área de pulsación, que se extiende hacia fuera y nunca cubre la etiqueta. Al pulsarla, o al pulsar Retroceso o Supr mientras el chip tiene el foco, se pide quitar el chip. El chip nunca se quita a sí mismo. Tu código quita el elemento y mueve el foco: al chip siguiente, al anterior o al campo al que pertenecen los chips.
La acción de quitar puede presentarse como destructiva (destructiveRemove, desactivado de forma predeterminada). En reposo se ve como se vería sin el indicador. Mientras tiene el cursor encima, el foco o está pulsada, su glifo y su capa de estado toman el color de error. La mayoría de las eliminaciones quitan algo que la persona puede recuperar en un paso, como un filtro aplicado o un término de búsqueda, así que la acción de quitar es simple salvo que actives el indicador. Actívalo donde quitar haga perder algo que no se recupera en un paso, como un archivo adjunto o un destinatario ya invitado. En la web el atributo es destructive-remove. El indicador cambia los colores y nada más, y se ignora en los demás tipos.
Un chip de entrada que ahora no se puede quitar, como un elemento de un campo de solo lectura, no dibuja la acción de quitar: define removable como false. No queda ahí una acción que no hace nada, Retroceso y Supr no piden nada, y el chip lleva el margen interior de un chip sin esa acción. En la web el atributo es el inverso, not-removable. Se ignora en los demás tipos.
Se usa en el campo de chips, donde cada elemento es un chip de entrada pequeño. Ahí el campo da a todo el conjunto una sola parada de tabulación y sus propias teclas, quita el chip que lo pide y mueve el foco. En la web, un componente que contiene chips de esta manera define tabindex="-1" en cada chip, lo que saca el chip y su acción de quitar del orden de tabulación y deja que ambos sigan pudiendo recibir el foco.
- Mantén las etiquetas cortas, de una a tres palabras. Un chip se queda en una sola línea y corta su etiqueta con puntos suspensivos solo cuando el diseño le da demasiado poco ancho.
- Usa una sola variante para una fila de chips.
- Nombra el elemento en la etiqueta de quitar: «Quitar a Ada Lovelace», no «Quitar».
- Da a la acción de quitar el aspecto destructivo solo donde quitar haga perder algo que no se recupera en un paso, como un archivo adjunto. Déjala simple donde el elemento vuelve en un paso, como un filtro o un término de búsqueda.
- En la web, pon la fila de chips en un grupo de tags: los coloca en líneas, de modo que el que no cabe en una pasa a la siguiente, mantiene la distancia entre ellos y los expone como una sola lista. En las demás plataformas, y en una fila con desplazamiento, dispón tú los chips.
- No uses un chip de filtro para un ajuste que se aplica de inmediato y va solo. Usa un interruptor.
- No uses un chip para la acción principal de una pantalla. Usa un botón o un botón de acción principal.
- No navegues desde el controlador de clic de un chip de acción. Un chip que lleva a algún sitio recibe
href. - No mezcles tipos en una misma fila, como filtros junto a acciones sugeridas.
- No le des a un chip de filtro una etiqueta que cambie con su estado. El estado se anuncia por separado.
- Rol
button (link while an action chip has href)- Etiquetado
- label is the chip's accessible name. An input chip's remove action is a separate button named by removeLabel, which names the item and the action ("Remove Ada Lovelace"), with or without destructiveRemove. The icon, the check, the cancel glyph and the avatar are decorative: a filter chip's state is announced from its pressed state, never from the check.
- Objetivo mínimo
- El área de pulsación cumple el tamaño mínimo de objetivo aunque el tamaño visual sea menor. minimum 32px · pointer 44px · spacing 8px · touch 48px
Teclado
| Teclas | Acción |
|---|---|
| Tab | Moves focus to the chip. An input chip is one stop too: its remove action is not in the Tab order, and is reached by pointer, touch and assistive technology. |
| Enter / Space | Activates the chip (a filter chip switches selected); on the remove action, removes the input chip. A link chip is activated by Enter alone: Space does what it does on any link (on the web it scrolls the page). |
| Backspace / Delete | On a focused input chip, removes it (CHP-19). The chip tells assistive technology of these keys (on the web aria-keyshortcuts="Delete Backspace"), since its remove action is not met by Tab. |
Notas
- A filter chip is a button with a pressed state (aria-pressed on the web, the selected trait on Apple platforms, a toggleable state on Android), as a toggle Button is, not a checkbox.
- An input chip is two elements on every platform: the chip (role button) and its remove action (role button, named by removeLabel). On the web the remove action is a second `<button>` in the shadow root; on the other platforms it is its own accessibility element with its own hit area. It is one Tab stop: the remove action stays out of the Tab order, as the delete icon of MUI's Chip, the remove button of React Aria's TagGroup and the dismiss of Fluent's Tag do, and the keyboard removes the chip with Backspace or Delete on the chip itself, as a person who removes several entries in a row expects — one press each, without a second stop per chip to pass.
- The chip does not group itself. A row of chips is laid out in wrapping lines, exposed as one list and given focus after a removal by the Tag group (TGR-1, TGR-7, TGR-9), or by the layout that holds the chips; one Tab stop with arrow keys, and single or multiple selection among filter chips, are a Tag group's that holds a selection (TGR-17 to TGR-21), or a Toolbar's.
- destructiveRemove adds a color, never a meaning: the name removeLabel, the cancel glyph and the button role already say what the action does, so a person who cannot tell the error color from the resting one loses nothing (WCAG 1.4.1). The error glyph is a graphical object and keeps at least 3:1 against the chip's container in every scheme of the default system: the error role is held to 4.5:1 on every surface role by the token invariants, and the outlined chip shows a surface through its clear container while the elevated one is surface-container-lowest; under the state layer the lowest ratio is 3.98:1 (light scheme, on surface-container-highest, at the focus and pressed opacity).
- The label does not wrap; at 200% text size the chip grows in height and the layout that holds a row lets it wrap to the next line or scroll.
- How a state looks is a value decision of the active design system; components read the state's tokens and never compute the effect themselves.
- In the default system the outline of an outlined chip is the hairline (the divider's color), far below 3:1 against the surface. That is within WCAG 1.4.11: the edge is not what identifies the chip. Its label is text held to 4.5:1, a selected filter chip is shown by its fill and its check, and focus by the focus ring. A product whose chips must show a 3:1 edge sets comp.chip.outlined.outline.color to sys.color.outline in a layer.
- An action chip with a destination is a link: the link role, the platform's own link, Enter and not Space. A filter chip and an input chip take no destination. No visited state is drawn.
- A link chip that opens a new context shows the open_in_new mark after its label and says so through targetLabel; the words are the product's.
Generado a partir de specs/chip.spec.json, tokens/sys/measure.tokens.json
- Todos los chips exponen el rol de botón, la etiqueta como nombre y su estado deshabilitado. El icono, la marca de verificación y el avatar quedan ocultos para la tecnología de apoyo.
- Un chip de acción con
hrefexpone en su lugar el rol de enlace, con el mismo nombre. La marca de un enlace que abre una pestaña nueva queda oculta para la tecnología de apoyo;targetLabeles la descripción del enlace, que se lee después de su nombre y su rol. - Un chip de filtro expone además si está activado, como hace un botón conmutador: un estado pulsado en la web, el rasgo de seleccionado en las plataformas de Apple, un estado conmutable en Android. Su estado nunca se anuncia a partir de la marca de verificación.
- Un chip de entrada son dos elementos, el chip y su acción de quitar, un botón aparte que recibe su nombre de la etiqueta de quitar, pero una sola parada en el orden del foco: Tab llega al chip y salta la acción de quitar, que se sigue pulsando con el puntero, el tacto y las tecnologías de apoyo. Retroceso o Supr sobre el chip con foco piden quitarlo, y el chip se lo dice a las tecnologías de apoyo (en la web, con
aria-keyshortcuts). - Enter y Espacio activan el chip, o la acción de quitar cuando esta tiene el foco. Un chip de enlace se activa solo con Enter. Cada uno muestra su propio indicador de foco, solo para el foco del teclado.
- El área de pulsación del chip cumple el objetivo mínimo en los dos tamaños. La acción de quitar tiene un área de pulsación propia que también lo cumple, sin cubrir la etiqueta.
- El aspecto destructivo de la acción de quitar nunca es la única señal. Con
destructiveRemoveactivado o desactivado, la acción de quitar conserva su rol, su nombre, su glifo, su tamaño y su área de pulsación, y no anuncia nada más. El nombre, «Quitar a Ada Lovelace», dice lo que hace. - La etiqueta completa sigue siendo el nombre accesible incluso cuando se corta. Con tamaños de texto mayores, el chip crece en altura y conserva la forma de píldora.
- En el sistema predeterminado, el borde de un chip outlined es la línea fina, que queda por debajo de 3:1 frente a la superficie. El borde no es lo que identifica al chip: la etiqueta es texto con contraste pleno, un chip de filtro seleccionado muestra su relleno y su marca de verificación, y el foco muestra el anillo de foco. Un producto que necesite un borde de 3:1 define
comp.chip.outlined.outline.colorcomosys.color.outlineen una capa. - Las compilaciones de depuración notifican que falta la etiqueta, que falta la etiqueta de quitar en un chip de entrada, un enlace que abre una pestaña nueva sin
targetLabel, un destino en un chip de filtro o de entrada, y un tipo desconocido, que se renderiza y se comporta como un chip de acción.
Carencias conocidas por plataforma:
- React Native: Retroceso y Supr se entregan mediante un evento de tecla cuya entrega en iOS y Android no se ha comprobado en un dispositivo. En cualquier caso, la acción de quitar sigue siendo accesible con Tab.
- React Native: que VoiceOver y TalkBack llegan al chip y a su acción de quitar como dos elementos en ese orden, y el área de pulsación de la acción de quitar, solo se han probado sin un dispositivo. En Android, un área de pulsación no puede extenderse más allá de la vista padre, así que deja espacio alrededor de una fila de chips de entrada.
- Flutter: el área de pulsación de la acción de quitar se extiende más allá del extremo del chip, y Flutter le hace sitio ensanchando el diseño del chip de entrada, así que una fila de chips de entrada queda un poco más espaciada.
- Compose: el área de pulsación de la acción de quitar se extiende más allá del extremo del chip sin ensancharlo, así que un chip colocado justo después recibe las pulsaciones donde ambos se solapan. Un toque ahí, las teclas mediante la gestión de teclas de la plataforma y TalkBack solo se han probado con Robolectric, todavía no en un dispositivo.
- SwiftUI: Retroceso y Supr sobre el chip, y Tab desde el chip hasta su acción de quitar, se prueban por partes, pero todavía no de extremo a extremo. Donde una pulsación atenúa el control (cupertino), el glifo de quitar se atenúa un fotograma después que el chip.
- SwiftUI y Compose mantienen el icono, la marca de verificación, el glifo de quitar y el avatar en su propio tamaño cuando el texto crece, mientras que la etiqueta crece. Todavía no se ha decidido si deben crecer con la etiqueta.
- SwiftUI, Compose, Flutter y React Native, que ofrecen la revisión anterior, siguen haciendo de la acción de quitar de un chip de entrada una segunda parada después del chip, y aún no dicen a las tecnologías de apoyo que Retroceso y Supr lo quitan. Cada una sacará la acción de quitar del orden del foco cuando se ponga al día.
- La web dibuja la marca de verificación y el glifo de quitar como
checkycanceldel conjunto de iconos, con los nombres que da la especificación (CHP-13, CHP-18). SwiftUI, Compose, Flutter y React Native, que ofrecen la revisión anterior, siguen dibujando la acción de quitar conclose(Flutter, mediante un punto de código de Material Symbols), y sin una fuente de iconos Compose y SwiftUI dibujan la marca de verificación y la cruz como vectores propios. Cada una dibujarácancelycheckpor su nombre, y ningún vector propio, cuando se ponga al día.
- Cuando la persona quite un chip de entrada, quítalo y mueve el foco a un chip vecino o al campo. El chip no hace nada después de pedirlo.
- Dale a cada chip de entrada una etiqueta de quitar que nombre su elemento. Varios botones «Quitar» en una fila no se pueden distinguir.
- Dale a un chip de enlace que abre una pestaña o una ventana nueva un
targetLabelen el idioma de tu producto. - Dale a una fila de chips de filtro un encabezado visible o un nombre de grupo que diga qué filtran.
- Proporciona tú el modelo de teclado de una fila si lo necesitas, como las teclas de flecha entre chips. Cada chip solo gestiona Tab, Enter, Espacio y, en un chip de entrada, Retroceso y Supr.