El campo de texto es un elemento básico de formulario que permite la inserción y edición de texto en una única línea. Se debe usar cuando el texto a introducir es corto, por ejemplo nombre o apellidos. Para textos largos usar áreas de texto.
Parámetros Nunjucks del componente: "Fieldset". Versión: 4.0.2
Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.
{"val":"params:\r\n- name: describedBy\r\n type: string\r\n required: false\r\n description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.\r\n- name: errorId\r\n type: string\r\n required: false\r\n description: One or more element IDs to add to the `aria-errormessage` attribute, used to provide additional error information for screenreader users.\r\n- name: legend\r\n type: object\r\n required: false\r\n description: Options for the legend\r\n params:\r\n - name: text\r\n type: string\r\n required: true\r\n description: If `html` is set, this is not required. Text to use within the legend. If `html` is provided, the `text` argument will be ignored.\r\n - name: html\r\n type: string\r\n required: true\r\n description: If `text` is set, this is not required. HTML to use within the legend. If `html` is provided, the `text` argument will be ignored.\r\n - name: classes\r\n type: string\r\n required: false\r\n description: Classes to add to the legend.\r\n - name: isPageHeading\r\n type: boolean\r\n required: false\r\n description: Whether the legend also acts as the heading for the page.\r\n- name: headingLevel\r\n type: number\r\n required: false\r\n description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.\r\n- name: classes\r\n type: string\r\n required: false\r\n description: Classes to add to the fieldset container.\r\n- name: role\r\n type: string\r\n required: false\r\n description: Optional ARIA role attribute.\r\n- name: attributes\r\n type: object\r\n required: false\r\n description: HTML attributes (for example data attributes) to add to the fieldset container.\r\n- name: caller\r\n type: nunjucks-block\r\n required: false\r\n description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fielset component in a `call` block.","length":2149}
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Fieldset", versión: 4.0.2, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
Mostrar código para visualizar el aria-describedby, el aria-errormessage y aria-invalid='true' aplicado en el HTML.
Ejemplo: "Con error", de código HTML, para maquetar el componente: "Fieldset", versión: 4.0.2, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
Utiliza el parámetro 'isPageheading': true para que el label esté dentro de un encabezado. Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>. Si no se establece un 'headingLevel', por defecto usará un <h1>.
Ejemplo: "Con label como encabezado", de código HTML, para maquetar el componente: "Fieldset", versión: 4.0.2, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
Utiliza el parámetro 'isPageheading': true para que el label esté dentro de un encabezado. Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>.
Ejemplo: "Con label como encabezado con h3", de código HTML, para maquetar el componente: "Fieldset", versión: 4.0.2, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
Ejemplo: "Con clases de css aplicadas", de código HTML, para maquetar el componente: "Fieldset", versión: 4.0.2, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/
Usar sólo el código que está dentro de la siguiente etiqueta <code>.