08
Controles de selección
Switch
Los switch deben ser usados cuando la intención de la interfaz es darle la posibilidad al usuario de activar o desactivar una opción.
•
Anatomía
Existen dos tipos de Switch:
Switch Labeled
Informa al usuario el tipo de dato que se quiere activar o desactivar, su uso es opcional según el contexto en que se utilice.
- Contenedor
- Switch icon
- Label
Switch Label
3
1
2
Switch Plain
Permiten al usuario activar o desactivar el estado de un componente u opción.
- Contenedor
- Switch icon
1
2
•
Estructura
Las medidas de estructura están dadas en px / rem.
24/1.5
8/0.5
40/2.5
Switch Label
•
Estados
Hay dos estados para el switch, la aplicación por defecto del mismo, es a consideración de cada escenario, caso de negocio y diseñador.
Switch Plain
Switch labeled
OFF
Disable unchecked
ON
ON disable
Elemento
OFF
Disable unchecked
ON
ON disable
Color de contenedor
Icon: $carbon light-100
Fill: $carbon light-900
Icon: $carbon light-100
Fill: $carbon light-600
Icon: $carbon light-100
Fill: $primary-600
Icon: $carbon light-100
Fill: $carbon mid-100
Color de texto
Color: $carbon mid-400
Color: $carbon mid-400
Color: $carbon dark-600
Color: $carbon mid-600
•
Tamaños
Hay tres tamaños de Switch definidos: Large, Medium y Small. Se debe procurar el uso de un tamaño constante dentro de la misma página o componente. Su uso es tanto para desktop como para mobile, se sugiere para uso mobile el uso del Switch large.
24/1.5
40/2.5
Switch Label
L
19/1.188
32/2
Switch Label
M
17/1.062
28/1.75
Switch Label
S
Tamaño
Large
Medium
Small
Tamaño
de fuente
24 / 1.5
19 / 1.188
17 / 1.063
Tamaño de fuente
Body2/medium
Action3/medium
Action3/medium
Icono Swithc px /rem
20 / 1.25
16 / 1
14 / 0.875
Checkbox
Permiten a los usuarios seleccionar uno o más elementos de un conjunto de opciones y se pueden usar para activar o desactivar una o varias de ellas.
•
Anatomía
Existen dos tipos de Switch:
Checkbox LabeledPlain
Permiten al usuario marcar o desmarcar elementos de un número fijo de alternativas.
- Contenedor
- Checkbox icon
- Label
Checkbox Label
3
1
2
Checkbox Plain
Permiten al usuario marcar o desmarcar elementos de un número fijo de alternativas.
- Contenedor
- Checkbox icon
1
2
•
Estructura
Las medidas de estructura están dadas en px / rem.
1
24/1.5
8/0.5
24/1.5
Checkbox Label
2
12/0.875
Checkbox Label
16 / 1
16 / 1
8 / 0.5
•
Estados
Hay dos estados para el switch, la aplicación por defecto del mismo, es a consideración de cada escenario, caso de negocio y diseñador.
Checkbox labeled
1
Enable unchecked
2
Hover
3
Enable checked
4
Disable unchecked
5
Disable checked
Checkbox labeled container
1
Enable unchecked
2
Enable unchecked
3
Enable unchecked
4
Enable unchecked
5
Enable unchecked
Elemento
Enabled Unchecked
Hover*
Checked
Disable Unchecked
Disable Checked
Atributo
Outline: Inside - 1px
Outline container: Inside - 1px
Outline: Inside - 1px
Outline container: Inside - 1px
Icon size: 9x6
(for all sizes)
Outline container: Inside - 1px
Outline: Inside - 1px
Outline container: Inside - 1px
Icon size: 9x6
(for all sizes)
Outline container: Inside - 1px
Color de contenedor
Checkbox and Container
Outline: $carbon light-900
Fill: $carbon light-100
Outline: $primary-600
Fill: $primary-100
Outline container: Same as Fill
Icon: $carbon light-100
Fill: $primary-600
Outline container: Same as fill
Checkbox and Container
Outline: $carbon light-600
Checkbox and
Container Fill: $carbon light-400
Icon: $carbon light-100
Fill: $carbon mid-100
Outline container: Same as fill
Color de texto
Color: $carbon dark-600
Color: $carbon dark-600
Color: $carbon dark-600
Color: $carbon mid-400
Color: $carbon mid-400
•
Tamaños
Hay tres tamaños de Checkboxes definidos: Large, Medium y Small. Se debe procurar el uso de un tamaño constante dentro de la misma página o componente. Su uso es tanto para desktop como para mobile, se sugiere para uso mobile el uso del checkbox large.
L
24/?
Checkbox Label
M
20/?
Checkbox Label
S
16/?
Checkbox Label
Tamaño
Large
Medium
Small
Altura (px/rem)
24 / 1.5
20 / 1.25
16 / 1
Tamaño de fuente
Body2/medium
Action3/medium
Action3/medium
Round corners
6 / 0.375
6 / 0.375
4 / 0.25
Raddio Button
Los Radio Button permiten seleccionar al menos una de dos opciones en un componente. Por lo tanto, la activación de un radio button impide la activación de otro similar en el mismo grupo. Cada radio button tiene un label diferente.
•
Anatomía
Existen dos tipos de Radio Button:
Radio Button LabeledPlain
Permiten al usuario marcar o desmarcar elementos de un número fijo de alternativas.
- Contenedor
- Radio Button Icon
- Label
3
1
2
Radio Button Plain
Permiten al usuario marcar o desmarcar elementos de un número fijo de alternativas.
- Contenedor
- Radio Button Icon
1
2
•
Estados
El uso de los estados interactivos definen la respuesta que recibe el usuario al interactuar con el Radio Button.
Radio Button labeled
1
2
Hover
3
4
Disable unchecked
5
Disable checked
Radio Button labeled
container
1
2
Hover unckecked
3
4
Disable unchecked
5
Disable checked
Elemento
Enabled Unchecked
Hover*
Checked
Disable Unchecked
Disable Checked
Atributo
Outline: Inside - 1px
Outline container: Inside - 1px
Outline: Inside - 1px
Outline container: Inside - 1px
Outline container: Inside - 1px
Outline: Inside - 1px
Outline container: Inside - 1px
Outline container: Inside - 1px
Color de contenedor
Checkbox and Container
Outline: $carbon light-900
Fill: $carbon light-100
Outline: $primary-600
Fill: $primary-100
Outline container: Same as Fill
Icon: $carbon light-100
Fill: $primary-600
Outline container: $primary-600
Container fill: $success-100
Checkbox and Container
Outline: $carbon light-600
Checkbox and Container
Fill: $carbon light-400
Icon: $carbon light-100
Fill: $carbon mid-100
Outline container: $carbon mid-100
Container fill: $carbon light-100
Color de texto
Color: $carbon dark-600
Color: $carbon dark-600
Color: $carbon dark-600
Color: $carbon mid-400
Color: $carbon mid-400
* Solo para uso en desktop
•
Tamaños
Hay tres tamaños de Radio button definidos: Large, Medium y Small. Se debe procurar el uso de un tamaño constante dentro de la misma página o componente. Su uso es tanto para desktop como para mobile, se sugiere para uso mobile el uso del Radio button large.
L
24/?
M
20/?
S
16/?
Tamaño
Large
Medium
Small
Altura (px/rem)
24 / 1.5
20 / 1.25
16 / 1.125
Tamaño de fuente
Body2/medium
Action3/medium
Action3/medium
Icono Radio Button
10 / 0.625
8 / 0.5
6 / 0.375
This is fine 🔥 | All Rights Reserved
08
Controles de selección
Switch
Los switch deben ser usados cuando la intención de la interfaz es darle la posibilidad al usuario de activar o desactivar una opción.
•
Anatomía
Existen dos tipos de Switch:
Switch Labeled
Informa al usuario el tipo de dato que se quiere activar o desactivar, su uso es opcional según el contexto en que se utilice.
- Contenedor
- Switch icon
- Label
Switch Label
3
1
2
Switch Plain
Permiten al usuario activar o desactivar el estado de un componente u opción.
- Contenedor
- Switch icon
1
2
•
Estructura
Las medidas de estructura están dadas en px / rem.
24/1.5
8/0.5
40/2.5
Switch Label
•
Estados
Hay dos estados para el switch, la aplicación por defecto del mismo, es a consideración de cada escenario, caso de negocio y diseñador.
Switch Plain
Switch labeled
OFF
Disable unchecked
ON
ON disable
Elemento
OFF
Disable unchecked
ON
ON disable
Color de contenedor
Icon: $carbon light-100
Fill: $carbon light-900
Icon: $carbon light-100
Fill: $carbon light-600
Icon: $carbon light-100
Fill: $primary-600
Icon: $carbon light-100
Fill: $carbon mid-100
Color de texto
Color: $carbon mid-400
Color: $carbon mid-400
Color: $carbon dark-600
Color: $carbon mid-600
•
Tamaños
Hay tres tamaños de Switch definidos: Large, Medium y Small. Se debe procurar el uso de un tamaño constante dentro de la misma página o componente. Su uso es tanto para desktop como para mobile, se sugiere para uso mobile el uso del Switch large.
24/1.5
40/2.5
Switch Label
L
19/1.188
32/2
Switch Label
M
17/1.062
28/1.75
Switch Label
S
Tamaño
Large
Medium
Small
Altura px /rem
24 / 1.5
19 / 1.188
17 / 1.063
Tamaño de fuente
Body2/medium
Action3/medium
Action3/medium
Icono Swithc px /rem
20 / 1.25
16 / 1
14 / 0.875
Checkbox
Permiten a los usuarios seleccionar uno o más elementos de un conjunto de opciones y se pueden usar para activar o desactivar una o varias de ellas.
•
Anatomía
Existen dos tipos de Switch:
Checkbox LabeledPlain
Permiten al usuario marcar o desmarcar elementos de un número fijo de alternativas.
- Contenedor
- Checkbox icon
- Label
Checkbox Label
3
1
2
Checkbox Plain
Permiten al usuario marcar o desmarcar elementos de un número fijo de alternativas.
- Contenedor
- Checkbox icon
1
2
•
Estructura
Las medidas de estructura están dadas en px / rem.
1
24/1.5
8/0.5
24/1.5
Checkbox Label
2
12/0.875
Checkbox Label
16 / 1
16 / 1
8 / 0.5
•
Estados
Hay dos estados para el switch, la aplicación por defecto del mismo, es a consideración de cada escenario, caso de negocio y diseñador.
Checkbox labeled
1
Enable unchecked
2
Hover
3
Enable checked
4
Disable unchecked
5
Disable checked
Checkbox labeled container
1
Enable unchecked
2
Enable unchecked
3
Enable unchecked
4
Enable unchecked
5
Enable unchecked
Elemento
Enabled Unchecked
Hover*
Checked
Disable Unchecked
Disable Checked
Atributo
Outline:
Inside - 1px
Outline container: Inside - 1px
Outline:
Inside - 1px
Outline container: Inside - 1px
Icon size: 9x6
(for all sizes)
Outline container: Inside - 1px
Outline:
Inside - 1px
Outline container: Inside - 1px
Icon size: 9x6
(for all sizes)
Outline container: Inside - 1px
Color de contenedor
Checkbox and Container
Outline: $carbon light-900
Fill: $carbon light-100
Outline: $primary-600
Fill: $primary-100
Outline container: Same as Fill
Icon: $carbon light-100
Fill: $primary-600
Outline container: Same as fill
Checkbox and Container
Outline: $carbon light-600
Checkbox and
Container Fill: $carbon light-400
Icon: $carbon light-100
Fill: $carbon mid-100
Outline container: Same as fill
Color de texto
Color:
$carbon dark-600
Color:
$carbon dark-600
Color:
$carbon dark-600
Color:
$carbon mid-400
Color:
$carbon mid-400
•
Tamaños
Hay tres tamaños de Checkboxes definidos: Large, Medium y Small. Se debe procurar el uso de un tamaño constante dentro de la misma página o componente. Su uso es tanto para desktop como para mobile, se sugiere para uso mobile el uso del checkbox large.
L
24/?
Checkbox Label
M
20/?
Checkbox Label
S
16/?
Checkbox Label
Tamaño
Large
Medium
Small
Altura (px/rem)
24 / 1.5
20 / 1.25
16 / 1
Tamaño de fuente
Body2/medium
Action3/medium
Action3/medium
Round corners
6 / 0.375
6 / 0.375
4 / 0.25
Raddio Button
Los Radio Button permiten seleccionar al menos una de dos opciones en un componente. Por lo tanto, la activación de un radio button impide la activación de otro similar en el mismo grupo. Cada radio button tiene un label diferente.
•
Anatomía
Existen dos tipos de Radio Button:
Radio Button LabeledPlain
Permiten al usuario marcar o desmarcar elementos de un número fijo de alternativas.
- Contenedor
- Radio Button Icon
- Label
3
1
2
Radio Button Plain
Permiten al usuario marcar o desmarcar elementos de un número fijo de alternativas.
- Contenedor
- Radio Button Icon
1
2
•
Estados
El uso de los estados interactivos definen la respuesta que recibe el usuario al interactuar con el Radio Button.
Radio Button labeled
1
2
Hover
3
4
Disable unchecked
5
Disable checked
Radio Button labeled container
1
2
Hover unckecked
3
4
Disable unchecked
5
Disable checked
Elemento
Enabled Unchecked
Hover*
Checked
Disable Unchecked
Disable Checked
Atributo
Outline: Inside - 1px
Outline container: Inside - 1px
Outline: Inside - 1px
Outline container: Inside - 1px
Outline container: Inside - 1px
Outline: Inside - 1px
Outline container: Inside - 1px
Outline container: Inside - 1px
Color de contenedor
Checkbox and Container
Outline: $carbon light-900
Fill: $carbon light-100
Outline: $primary-600
Fill: $primary-100
Outline container: Same as Fill
Icon: $carbon light-100
Fill: $primary-600
Outline container: $primary-600
Container fill: $success-100
Checkbox and Container
Outline: $carbon light-600
Checkbox and Container
Fill: $carbon light-400
Icon: $carbon light-100
Fill: $carbon mid-100
Outline container: $carbon mid-100
Container fill: $carbon light-100
Color de texto
Color: $carbon dark-600
Color: $carbon dark-600
Color: $carbon dark-600
Color: $carbon mid-400
Color: $carbon mid-400
* Solo para uso en desktop
•
Tamaños
Hay tres tamaños de Radio button definidos: Large, Medium y Small. Se debe procurar el uso de un tamaño constante dentro de la misma página o componente. Su uso es tanto para desktop como para mobile, se sugiere para uso mobile el uso del Radio button large.
L
24/?
M
20/?
S
16/?
Tamaño
Large
Medium
Small
Altura (px/rem)
24 / 1.5
20 / 1.25
16 / 1.125
Tamaño de fuente
Body2/medium
Action3/medium
Action3/medium
Icono Radio Button
10 / 0.625
8 / 0.5
6 / 0.375
This is fine 🔥 | All Rights Reserved
08
Controles de selección
Switch
Los switch deben ser usados cuando la intención de la interfaz es darle la posibilidad al usuario de activar o desactivar una opción.
•
Anatomía
Existen dos tipos de Switch:
Switch Labeled
Informa al usuario el tipo de dato que se quiere activar o desactivar, su uso es opcional según el contexto en que se utilice.
- Contenedor
- Switch icon
- Label
Switch Label
3
1
2
Switch Plain
Permiten al usuario activar o desactivar el estado de un componente u opción.
- Contenedor
- Switch icon
1
2
•
Estructura
Las medidas de estructura están dadas en px / rem.
24/1.5
8/0.5
40/2.5
Switch Label
•
Estados
Hay dos estados para el switch, la aplicación por defecto del mismo, es a consideración de cada escenario, caso de negocio y diseñador.
Switch Plain
Switch labeled
OFF
Disable unchecked
ON
ON disable
Elemento
OFF
Disable unchecked
ON
ON disable
Color de contenedor
Icon: $carbon light-100
Fill: $carbon light-900
Icon: $carbon light-100
Fill: $carbon light-600
Icon: $carbon light-100
Fill: $primary-600
Icon: $carbon light-100
Fill: $carbon mid-100
Color de texto
Color: $carbon mid-400
Color: $carbon mid-400
Color: $carbon dark-600
Color: $carbon mid-600
•
Tamaños
Hay tres tamaños de Switch definidos: Large, Medium y Small. Se debe procurar el uso de un tamaño constante dentro de la misma página o componente. Su uso es tanto para desktop como para mobile, se sugiere para uso mobile el uso del Switch large.
24/1.5
40/2.5
Switch Label
L
19/1.188
32/2
Switch Label
M
17/1.062
28/1.75
Switch Label
S
Tamaño
Large
Medium
Small
Altura px /rem
24 / 1.5
19 / 1.188
17 / 1.063
Tamaño de fuente
Body2/medium
Action3/medium
Action3/medium
Icono Swithc px /rem
20 / 1.25
16 / 1
14 / 0.875
Checkbox
Permiten a los usuarios seleccionar uno o más elementos de un conjunto de opciones y se pueden usar para activar o desactivar una o varias de ellas.
•
Anatomía
Existen dos tipos de Switch:
Checkbox Labeled
Informa al usuario el tipo de dato que se quiere marcar o desmarcar.
- Contenedor
- Checkbox icon
- Label
Checkbox Label
3
1
2
Checkbox Plain
Permiten al usuario marcar o desmarcar elementos de un número fijo de alternativas.
- Contenedor
- Checkbox icon
1
2
•
Estructura
Las medidas de estructura están dadas en px / rem.
1
24/1.5
8/0.5
24/1.5
Checkbox Label
2
12/0.875
Checkbox Label
16 / 1
16 / 1
8 / 0.5
•
Estados
Hay dos estados para el switch, la aplicación por defecto del mismo, es a consideración de cada escenario, caso de negocio y diseñador.
Checkbox labeled
1
Enable unchecked
2
Hover
3
Enable checked
4
Disable unchecked
5
Disable checked
Checkbox labeled container
1
Enable unchecked
2
Enable unchecked
3
Enable unchecked
4
Enable unchecked
5
Enable unchecked
Elemento
Enabled Unchecked
Hover*
Checked
Disable Unchecked
Disable Checked
Atributo
Outline: Inside - 1px
Outline container: Inside - 1px
Outline: Inside - 1px
Outline container: Inside - 1px
Icon size: 9x6
(for all sizes)
Outline container: Inside - 1px
Outline: Inside - 1px
Outline container: Inside - 1px
Icon size: 9x6
(for all sizes)
Outline container: Inside - 1px
Color de contenedor
Checkbox and Container
Outline: $carbon light-900
Fill: $carbon light-100
Outline: $primary-600
Fill: $primary-100
Outline container: Same as Fill
Icon: $carbon light-100
Fill: $primary-600
Outline container: Same as fill
Checkbox and Container
Outline: $carbon light-600
Checkbox and
Container Fill: $carbon light-400
Icon: $carbon light-100
Fill: $carbon mid-100
Outline container: Same as fill
Color de texto
Color: $carbon dark-600
Color: $carbon dark-600
Color: $carbon dark-600
Color: $carbon mid-400
Color: $carbon mid-400
•
Tamaños
Hay tres tamaños de Checkboxes definidos: Large, Medium y Small. Se debe procurar el uso de un tamaño constante dentro de la misma página o componente. Su uso es tanto para desktop como para mobile, se sugiere para uso mobile el uso del checkbox large.
L
24/?
Checkbox Label
M
20/?
Checkbox Label
S
16/?
Checkbox Label
Tamaño
Large
Medium
Small
Altura (px/rem)
24 / 1.5
20 / 1.25
16 / 1
Tamaño de fuente
Body2/medium
Action3/medium
Action3/medium
Round corners
6 / 0.375
6 / 0.375
4 / 0.25
Raddio Button
Los Radio Button permiten seleccionar al menos una de dos opciones en un componente. Por lo tanto, la activación de un radio button impide la activación de otro similar en el mismo grupo. Cada radio button tiene un label diferente.
•
Anatomía
Existen dos tipos de Radio Button:
Radio Button Labeled
Informa al usuario el tipo de dato que se quiere marcar o desmarcar.
- Contenedor
- Radio Button Icon
- Label
3
1
2
Radio Button Plain
Permiten al usuario marcar o desmarcar elementos de un número fijo de alternativas.
- Contenedor
- Radio Button Icon
1
2
•
Estados
El uso de los estados interactivos definen la respuesta que recibe el usuario al interactuar con el Radio Button.
Radio Button labeled
1
2
Hover
3
4
Disable unchecked
5
Disable checked
Radio Button labeled container
1
2
Hover unckecked
3
4
Disable unchecked
5
Disable checked
Elemento
Enabled Unchecked
Hover*
Checked
Disable Unchecked
Disable Checked
Atributo
Outline: Inside - 1px
Outline container: Inside - 1px
Outline: Inside - 1px
Outline container: Inside - 1px
Outline container: Inside - 1px
Outline: Inside - 1px
Outline container: Inside - 1px
Outline container: Inside - 1px
Color de contenedor
Checkbox and Container
Outline: $carbon light-900
Fill: $carbon light-100
Outline: $primary-600
Fill: $primary-100
Outline container: Same as Fill
Icon: $carbon light-100
Fill: $primary-600
Outline container: $primary-600
Container fill: $success-100
Checkbox and Container
Outline: $carbon light-600
Checkbox and Container
Fill: $carbon light-400
Icon: $carbon light-100
Fill: $carbon mid-100
Outline container: $carbon mid-100
Container fill: $carbon light-100
Color de texto
Color: $carbon dark-600
Color: $carbon dark-600
Color: $carbon dark-600
Color: $carbon mid-400
Color: $carbon mid-400
* Solo para uso en desktop
•
Tamaños
Hay tres tamaños de Radio button definidos: Large, Medium y Small. Se debe procurar el uso de un tamaño constante dentro de la misma página o componente. Su uso es tanto para desktop como para mobile, se sugiere para uso mobile el uso del Radio button large.
L
24/?
M
20/?
S
16/?
Tamaño
Large
Medium
Small
Altura (px/rem)
24 / 1.5
20 / 1.25
16 / 1.125
Tamaño de fuente
Body2/medium
Action3/medium
Action3/medium
Icono Radio Button
10 / 0.625
8 / 0.5
6 / 0.375
This is fine 🔥 | All Rights Reserved