13. segmentado.html - Botones segmentados

Permiten selecionar de entre 2 a 5 opciones.
La base es un elemento con class="md-segmented-button".
Puedes usar type="radio" para seleccionar una sola opción para un mismo valor del atributo name.
Puedes usar type="checkbox" para seleccionar varias opciones con un mismo valor del atributo name.

Salida


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5	<meta charset="UTF-8">
6	<meta name="viewport"
7	content="width=device-width">
8
9	<title>
10	Botón segmentado - PWA con MD
11	</title>
12
13	<meta name="theme-color"
14	content="#fffbfe">
15	<link rel="icon" sizes="32x32"
16	href="favicon.ico">
17	<link rel="manifest"
18	href="site.webmanifest">
19
20	<link rel="stylesheet"
21	href="css/estilos.css">
22	<script
23	src="ungap/custom-elements.js">
24	</script>
25	<script type="module"
26	src="js/configura.js"></script>
27
28	</head>
29
30	<body>
31
32	<md-top-app-bar headline="headline">
33
34	<h1>Segmentado</h1>
35
36	<button is="md-menu-button"
37	slot="navigation"
38	onclick="nav.abre()"></button>
39
40	</md-top-app-bar>
41
42	<h1 id="headline">
43	Botón segmentado
44	</h1>
45
46	<p class="md-segmented-button">
47
48	<input id="bueno" type="radio"
49	name="estado" checked value="2">
50	<label for="bueno">
51	<span
52	class="material-symbols-outlined">
53	done
54	</span>
55	Bueno
56	</label>
57
58	<input id="intermedio" type="radio"
59	name="estado" value="1">
60	<label for="intermedio">
61	<span
62	class="material-symbols-outlined">
63	done
64	</span>
65	Intermedio
66	</label>
67
68	<input id="malo" type="radio"
69	name="estado" value="0">
70	<label for="malo">
71	<span
72	class="material-symbols-outlined">
73	done
74	</span>
75	Malo
76	</label>
77
78	</p>
79
80	<nav-drw id="nav"></nav-drw>
81
82	</body>
83
84	</html>

Los botones segmentados de Material Design están defnidos en https://m3.material.io/components/segmented-buttons/overview.