Select
Los select son un componente de formulario. Se utilizan para seleccionar una única opción entre una lista de opciones.
Recomendaciones de uso
¿Qué hacer?
- Ordena la lista desplegable de manera que tenga sentido para el usuario. Suele ser alfabéticamente o numéricamente.
¿Qué no hacer?
- No se recomienda usar si hay más de 10 opciones. En su lugar utilizar un autocomplete.
- No utilizar si hay menos de tres opciones, existen otras alternativas que no ocultan el contenido como los radiobuttons.
Estados
- Stanby: es el select en su estado normal o reposo.
- Hover: es el estado al pasar por encima del select para activarlo.
- Focus: es el estado que nos marca con qué elemento estamos interactuando.
- Active:: al hacer clic sobre el select este se activará y nos aparecerá la lista desplegable.
- Filled: es es estado del select cuando está completado por el usuario.
- Disabled: es el estado desactivado del select.
- Error: nos marca cuando hemos introducido mal algun dato en el campo. Nos informa del error y contiene un texto de ayuda.
Si se van a colocar sobre un fondo oscuro, se utilizarán en el color inverso; si van sobre un fondo claro utilizarán en el color default del theme.
- Modo Default
- Modo Inverse
Estilos
Color
- Modo Default
| Nombre | Propiedad | Color token |
|---|---|---|
| Select | Background | $transparent |
| Select:label | text color | $text-01 |
| Select: placehoder | text color | $text-04 |
| Select:border | Stroke | $UI-06 |
| Select:panel | background | $UI-02 |
| Select:panel-item | text color | $text-01 |
| Input:panel-autocomplete | shadow | $small |
- Interactive Color
| Nombre | Propiedad | Color token |
|---|---|---|
| Focus | Stroke | $focus-01 |
| Hover | text color | $hover-06 |
| Error | color | $support-01 |
| Disabled | color | $disabled-04 |
- Modo Inverse
| Nombre | Propiedad | Color token |
|---|---|---|
| Select | Background | $transparent |
| Select:label | text color | $inverse-01 |
| Select: placehoder | text color | $inverse-01 |
| Select:border | Stroke | $inverse-01 |
| Select:panel | background | $UI-02 |
| Select:panel-item | text color | $text-01 |
| Input:panel-autocomplete | shadow | $small |
- Interactive Color
| Nombre | Propiedad | Color token |
|---|---|---|
| Focus | Stroke | $focus-01 |
| Hover | text color | $inverse-01 |
| Error | color | $support-01 |
| Disabled | color | $disabled-03 |
Tipografía
| Nombre | Tamaño fuente | Font weight | Estilo |
|---|---|---|---|
| Select:label L | 13/0.813 | Regular/400 | $tiny-M |
| Select: label M | 13/0.813 | Regular/400 | $tiny-M |
| Select: label S | 13/0.813 | Regular/400 | $tiny-M |
| Select: placeholder L | 15/0.938 | Regular/400 | $body-inline |
| Select: placeholder M | 13/0.813 | Regular/400 | $body-inline |
| Select: placeholder S | 13/0.813 | Regular/400 | $body-inline |
| Select: help-text L | 13/0.813 | Regular/400 | $tiny-M |
| Select: help-text M | 13/0.813 | Regular/400 | $tiny-M |
| Select: help-text S | 13/0.813 | Regular/400 | $tiny-M |
| select: panel-item L | 15/0.938 | Regular/400 | $body-inline |
| autocomplete: panel-item M | 13/0.813 | Regular/400 | $body-inline |
| autocomplete: panel-item S | 13/0.813 | Regular/400 | $body-inline |
Estructura
