Chip

Los chips son elementos compactos que representan una entrada, un atributo o una acción.

Los chips permiten a los usuarios introducir información, realizar selecciones, filtrar contenido o desencadenar acciones.

Aunque se incluyen aquí como un componente independiente, el uso más común será en alguna forma de entrada. más común será en alguna forma de entrada, por lo que algunos de los comportamientos no se muestra en contexto.

Chip básico

El componente Chip admite estilos de contorno y relleno.

Chip Relleno

Chip Delineado

<Chip label="Chip Filled" />
<Chip label="Chip Outlined" variant="outlined" />

<Chip label="Chip Filled" />
<Chip label="Chip Outlined" variant="outlined" />

Press Enter to start editing

Acciones de chip

Puedes utilizar las siguientes acciones.

Los chips con la propiedad onClick definida cambian de apariencia al enfocar, al pasar el ratón y al hacer clic.
Las fichas con la propiedad onDelete definida mostrarán un icono de borrado que cambia de apariencia al pasar el ratón por encima.

Cliqueable

<Chip label="Cliqueable" onClick={handleClick} />
<Chip label="Cliqueable" variant="outlined" onClick={handleClick} />

<Chip label="Cliqueable" onClick={handleClick} />
<Chip label="Cliqueable" variant="outlined" onClick={handleClick} />

Press Enter to start editing

Se puede eliminar

<Chip label="Se puede eliminar" onDelete={handleDelete} />
<Chip label="Se puede eliminar" variant="outlined" onDelete={handleDelete} />

<Chip label="Se puede eliminar" onDelete={handleDelete} />
<Chip label="Se puede eliminar" variant="outlined" onDelete={handleDelete} />

Press Enter to start editing

Cliqueable y eliminable

<Chip
  label="Cliqueable y eliminable"
  onClick={handleClick}
  onDelete={handleDelete}
/>
<Chip
  label="Cliqueable y eliminable"
  variant="outlined"
  onClick={handleClick}
  onDelete={handleDelete}
/>

<Chip
  label="Cliqueable y eliminable"
  onClick={handleClick}
  onDelete={handleDelete}
/>
<Chip
  label="Cliqueable y eliminable"
  variant="outlined"
  onClick={handleClick}
  onDelete={handleDelete}
/>

Press Enter to start editing

Enlace cliqueable

Enlace cliqueable Enlace cliqueable

<Chip label="Enlace cliqueable" component="a" href="#chip-básico" clickable />
<Chip
  label="Enlace cliqueable"
  component="a"
  href="#chip-básico"
  variant="outlined"
  clickable
/>

<Chip label="Enlace cliqueable" component="a" href="#chip-básico" clickable />
<Chip
  label="Enlace cliqueable"
  component="a"
  href="#chip-básico"
  variant="outlined"
  clickable
/>

Press Enter to start editing

Icono de eliminación personalizado

<Chip
  label="Icono de eliminación personalizado"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DoneIcon />}
/>
<Chip
  label="Icono de eliminación personalizado"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DeleteIcon />}
  variant="outlined"
/>

<Chip
  label="Icono de eliminación personalizado"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DoneIcon />}
/>
<Chip
  label="Icono de eliminación personalizado"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DeleteIcon />}
  variant="outlined"
/>

Press Enter to start editing

Adornos de chips

Puede añadir adornos al principio del componente.

Utiliza la propiedad icon para añadir un icono.

Icono de chip

Con Icono

<Chip icon={<FaceIcon />} label="Con Icono" />
<Chip icon={<FaceIcon />} label="Con Icono" variant="outlined" />

<Chip icon={<FaceIcon />} label="Con Icono" />
<Chip icon={<FaceIcon />} label="Con Icono" variant="outlined" />

Press Enter to start editing

Chip de color

Puedes usar la prop color para definir un color de la paleta de temas.

Primario

Secundario

Contraste

Éxito

Primario

Secundario

Contraste

Éxito

<Stack direction="row" spacing={1}>
  <Chip label="Primario" color="primary" />
  <Chip label="Secundario" color="secondary" />
  <Chip label="Contraste" color="contrast" />
  <Chip label="Éxito" color="success" />
</Stack>
<Stack direction="row" spacing={1}>
  <Chip label="Primario" color="primary" variant="outlined" />
  <Chip label="Secundario" color="secondary" variant="outlined" />
  <Chip label="Contraste" color="contrast" variant="outlined" />
  <Chip label="Éxito" color="success" variant="outlined" />
</Stack>

<Stack direction="row" spacing={1}>
  <Chip label="Primario" color="primary" />
  <Chip label="Secundario" color="secondary" />
  <Chip label="Contraste" color="contrast" />
  <Chip label="Éxito" color="success" />
</Stack>
<Stack direction="row" spacing={1}>
  <Chip label="Primario" color="primary" variant="outlined" />
  <Chip label="Secundario" color="secondary" variant="outlined" />
  <Chip label="Contraste" color="contrast" variant="outlined" />
  <Chip label="Éxito" color="success" variant="outlined" />
</Stack>

Press Enter to start editing

Tamaños de chip

Puedes utilizar la proposición size para definir un Chip pequeño.

Pequeño

<Chip label="Pequeño" size="small" />
<Chip label="Pequeño" size="small" variant="outlined" />

<Chip label="Pequeño" size="small" />
<Chip label="Pequeño" size="small" variant="outlined" />

Press Enter to start editing

Chip multilínea

Por defecto, los chips muestran las etiquetas en una sola línea. Para que admitan contenido multilínea, utilice la propiedad sx para añadir height:auto al componente Chip, y whiteSpace: normal a los estilos label.

Este es un chip que tiene varias líneas.

<Chip
  sx={{
    height: 'auto',
    '& .uiChip-label': {
      display: 'block',
      whiteSpace: 'normal',
    },
  }}
  label="Este es un chip que tiene varias líneas."
/>

<Chip
  sx={{
    height: 'auto',
    '& .uiChip-label': {
      display: 'block',
      whiteSpace: 'normal',
    },
  }}
  label="Este es un chip que tiene varias líneas."
/>

Press Enter to start editing

Matriz de chips

Ejemplo de representación de varias fichas a partir de una matriz de valores. Borrar una ficha la elimina del array (matriz). Ten en cuenta que como no está definida la propiedad onClick, el Chip puede ser enfocado, pero no gana profundidad mientras es pulsado o tocado.

Angular
jQuery
Polymer
React
Vue.js

Accesibilidad

Si el Chip es borrable o cliqueable entonces es un botón en orden de tabulación. Cuando el Chip está enfocado (por ejemplo al tabular) al soltar (evento keyup) Backspace o Delete se llamará al manejador onDelete mientras que al soltar Escape se desenfocará el Chip.

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

<Chip />