Seleccionar

Aquí tienes la traducción del archivo fuente de la guía de diseño al español, manteniendo un tono natural y conservando los componentes MDX, bloques de código y términos técnicos:

Un componente para seleccionar un valor o un conjunto de valores de una lista especificada. Cuando el usuario hace clic en el control, se abre una lista desplegable con un conjunto de valores para que el usuario elija.

§Casos de uso

¿Cuándo usarlo?

• Cuando esperas que el usuario seleccione valores de una lista especificada.

¿Cuándo evitarlo?

• Cuando quieres mostrar todos los valores para seleccionar. Para estos casos de uso, utiliza Radio, Checkbox o Radio Button.

§Opciones

Selección única

• Úsalo para seleccionar un único valor de una lista.
• Después de que el usuario selecciona un valor, la lista desplegable se cierra.
• El control muestra el valor seleccionado.

Selección múltiple

• Úsalo cuando esperas que el usuario seleccione más de un valor de una lista.
• En la lista, el valor seleccionado se marca con una marca de verificación a la izquierda.
• El control muestra los valores seleccionados separados por comas.
• Para cerrar la lista desplegable y aplicar los valores seleccionados, el usuario hace clic en el espacio en blanco exterior o en el botón de confirmación de la lista (si está disponible).

§Tipos

El control viene en dos tipos: Normal y Clear, ambos con el mismo conjunto de funciones pero con una apariencia diferente y aplicados según el contexto.

Normal

• El tipo de uso más frecuente.
• La característica distintiva es que el componente tiene un borde de 1 px, y los elementos interiores (texto y chevrón) tienen márgenes respecto a los bordes.
• Utiliza este componente en formularios donde necesites separar los elementos del formulario mediante márgenes.

Clear

• La característica distintiva es que el componente no tiene borde, y los elementos interiores (texto y chevrón) están alineados con los bordes del campo de entrada.
• Úsalo cuando el tipo Normal crea ruido visual.
• Al usar este tipo, asegúrate de que el significado del componente siga siendo claro para el usuario.

§Estructura

1. Etiqueta en línea
2. Valor
3. Icono de borrar
4. Chevrón
5. Icono de error
6. Descripción del error

§Etiqueta en línea

• Un elemento opcional.
• Añade una explicación al nombre del campo select.
• Puede reemplazar la etiqueta externa en el formulario.

§Valor

• Un elemento obligatorio.
• Por defecto, es una indicación para ayudar al usuario a entender qué se puede seleccionar de la lista de valores.
• El lugar donde se muestra el valor o los valores seleccionados.

§Icono de borrar

• Un elemento opcional.
• Úsalo para borrar rápidamente el componente de valores o opciones seleccionadas sin invocar la lista desplegable.
• Puede aparecer cuando se ha seleccionado al menos un valor.
• Después de borrar, el foco permanece en el componente.
• Cambia de color al pasar el ratón por encima.

§Chevrón

• Un elemento obligatorio.
• Úsalo para diferenciar el componente de otros componentes visualmente similares (por ejemplo, TextInput), para identificar el componente en el formulario.
• El componente solo puede tener un chevrón, por ejemplo, cuando necesitas una vista compacta.
• A pesar de la presencia de un chevrón, toda el área del componente es clickeable.

§Icono de error

• Se muestra solo en el estado de Error en línea.
• Funciona junto con una descripción del error en Tooltip que se muestra al pasar el ratón por encima del icono. Ayuda a mantener al usuario informado y a ahorrar espacio.

§Descripción del error

• Se muestra solo en el estado de Error de contorno.
• La descripción del error se coloca en la parte inferior izquierda del campo cuando necesitas mostrar inmediatamente la causa del error.

§Estados

Tiene varios estados: Suggest, Default, Hover, Disabled, Active, Inline Error, Outline Error.

1. Suggest. Estado inactivo, cuando el usuario no está interactuando directamente con el componente y no ha seleccionado nada en él. En este estado, puede indicar al usuario qué puede seleccionar.
2. Default. Estado inactivo, cuando el usuario no está interactuando directamente con el componente y ya ha seleccionado algo en él. En este estado, el valor de indicación cambia a la selección de la lista desplegable.
3. Hover. Estado activo cuando el usuario mueve el cursor sobre el área del componente.
4. Disabled. Estado inactivo del componente cuando el usuario no puede interactuar con él.
5. Active. Estado activo habilitado cuando el usuario ha hecho clic en el control. Se abre una lista desplegable al hacer clic.
6. Outline error. Un estado del componente activado por un error de validación, que se muestra en la parte inferior del campo con una explicación de lo sucedido.
7. Inline error. Un estado del componente activado por un error de validación, pero la explicación del error no se muestra, solo un icono especial. Al pasar el ratón por encima del icono, aparece un Tooltip con el error.

§Tamaños

Hay cuatro tamaños de componente: S, M, L, XL.

Tamaño	Altura	Estilo de texto	Redondeo
S	24	Body 1	5
M	28	Body 1	6
L	36	Body 1	8
XL	44	Body 2	10

La elección del tamaño determina la altura y las esquinas redondeadas del control, sus rellenos y el tamaño del texto.

El radio de la esquina depende del tamaño y se establece mediante variables.

1. S. Úsalo donde el control estándar sea demasiado grande (tablas, tarjetas pequeñas).
2. M. Este es el tamaño principal, úsalo en la mayoría de formularios y filtros.
3. L. Muy raramente utilizado.
4. XL. Úsalo en entornos de comunicación, es decir, sitios web y páginas de destino.

§Recomendaciones de uso

1. Trabajando con el campo

   • Elige el ancho del campo según el tamaño del contenido. Por ejemplo, puedes hacer el elemento más ancho para valores largos o selección múltiple.
   • Usa un solo tamaño con otros componentes complementarios en el formulario. Si elegiste trabajar con M, los otros componentes deben ser del mismo tamaño.
   • Usa el icono de cruz para borrar la selección múltiple: es más conveniente y rápido.
   • No puedes cambiar la altura del control. Solo proporcionamos el tamaño fijo del campo.

2. Etiqueta de contorno

   

   • Un nombre breve del campo (no debe exceder una línea).
   • Al usarlo en formularios, alinéalo con el valor dentro del campo.

3. Indicación con tooltip

   

   • Indicación adicional sobre la elección, que se muestra al pasar el ratón por encima del icono de interrogación.
   • Úsalo cuando necesites explicar la etiqueta.

4. Descripción

   

   • Puede ubicarse debajo del campo o a la derecha del campo.
   • Úsalo en casos especiales para hacer aclaraciones adicionales sobre la elección o dar explicaciones sobre los valores elegidos.