{{ componentInputText({
"label": "Nombre y apellidos",
"id": "nombre-completo",
"name": "nombreCompleto",
"required": true
}) }}
{{ componentInputText({
"label": "NIF o NIE",
"id": "nif-nie",
"name": "nifNie",
"required": true,
"pattern": "[0-9]{8}[A-Za-z]|[XYZ][0-9]{7}[A-Za-z]"
}) }}
```
* * *
## 7\. Composición con componentes
Si no existe un patrón para tu necesidad, construye usando componentes individuales.
### Categorías de componentes
- [Componentes principales](componente-principales.html): Botones, Detalles, Modal
- [Formularios](componente-formularios.html): Inputs, Textareas, Selects, Checkboxes, Radios, Datepicker, File upload
- [Navegación](componente-navegacion.html): Menús, Breadcrumbs, Paginación, Barra de búsqueda
- [Mostrar y ocultar](componente-mostrar-ocultar.html): Acordeón, Tabs, Dropdown, Tooltip, Toggle
- [Datos](componente-datos.html): Tablas, Cards, Píldoras, Items, Listados
- [Avisos](componente-avisos.html): Notificaciones, Modales, Resumen de errores
- [Información visual](componente-info-visual.html): Cabeceras, Footer, Iconos, Imágenes, Spinners
**Catálogo completo:** [Ver todos los componentes](componentes.html)
### Cada componente incluye:
- **Descripción:** Cuándo y cómo usarlo
- **Variantes:** Diferentes estilos disponibles
- **Código HTML:** Implementación con Nunjucks
- **Código Angular:** Implementación con componentes Angular
- **Accesibilidad:** Requisitos WCAG 2.1 AA
- **Ejemplos visuales:** Screenshots en móvil y escritorio
### Ejemplo - Botón primario
**HTML (Nunjucks):**
```html
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
"text": "Enviar formulario",
"classes": "c-button c-button--primary",
"type": "submit"
}) }}
```
**Angular (TypeScript):**
```html