Fieldset
Mostrar parámetros
Parámetros del componente
params:
- name: describedBy
type: string
required: false
description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: errorId
type: string
required: false
description: One or more element IDs to add to the `aria-errormessage` attribute, used to provide additional error information for screenreader users.
- name: legend
type: object
required: false
description: Options for the legend
params:
- name: text
type: string
required: true
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.
- name: html
type: string
required: true
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.
- name: classes
type: string
required: false
description: Classes to add to the legend.
- name: isPageHeading
type: boolean
required: false
description: Whether the legend also acts as the heading for the page.
- name: headingLevel
type: number
required: false
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.
- name: classes
type: string
required: false
description: Classes to add to the fieldset container.
- name: role
type: string
required: false
description: Optional ARIA role attribute.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the fieldset container.
- name: caller
type: nunjucks-block
required: false
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.
Por defecto #
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
"legend": {
"text": "¿Cuál es tu número de teléfono?",
"classes": "mb-sm"
}
}) %}
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="tel-id-1">Número de teléfono</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="tel-id-1" name="tel-name-1" type="text">
</div>
<!-- /input -->
{% endcall %}HTML
<!-- fieldset -->
<fieldset>
<legend class="mb-sm">
¿Cuál es tu número de teléfono?
</legend>
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="tel-id-1">Número de teléfono</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="tel-id-1" name="tel-name-1" type="text">
</div>
<!-- /input -->
</fieldset>
<!-- /fieldset -->
Con error #
Mostrar código para visualizar el aria-describedby, el aria-errormessage y aria-invalid="true" aplicado en el HTML.
Mostrar códigodel ejemplo: Con error
Contenido
Nunjucks macro
{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
"legend": {
"text": "¿Cuál es tu número de teléfono?",
"classes": "mb-sm"
},
"errorId": "error-id"
}) %}
<!-- input -->
<div class="c-form-group c-form-group--error">
<!-- label -->
<label class="block" for="tel-error-id-1">Número de teléfono</label>
<!-- /label -->
<!-- error-message -->
<p id="tel-error-id-1-error" class="block font-semibold text-alert-base">
<span class="sr-only">Error:</span>Error: Mensaje de error aqui
</p>
<!-- /error-message -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base " id="tel-error-id-1" name="tel-error-name-1" type="text" aria-describedby="tel-error-id-1-error" aria-errormessage="tel-error-id-1-error" aria-invalid="true">
</div>
<!-- /input -->
{% endcall %}HTML
<!-- fieldset -->
<fieldset aria-errormessage="error-id">
<legend class="mb-sm">
¿Cuál es tu número de teléfono?
</legend>
<!-- input -->
<div class="c-form-group c-form-group--error">
<!-- label -->
<label class="block" for="tel-error-id-1">Número de teléfono</label>
<!-- /label -->
<!-- error-message -->
<p id="tel-error-id-1-error" class="block font-semibold text-alert-base">
<span class="sr-only">Error:</span>Error: Mensaje de error aqui
</p>
<!-- /error-message -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base " id="tel-error-id-1" name="tel-error-name-1" type="text" aria-describedby="tel-error-id-1-error" aria-errormessage="tel-error-id-1-error" aria-invalid="true">
</div>
<!-- /input -->
</fieldset>
<!-- /fieldset -->
Con label como encabezado #
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>.
Mostrar códigodel ejemplo: Con label como encabezado
Contenido
Nunjucks macro
{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
"legend": {
"text": "¿Cuál es tu número de teléfono?",
"classes": "c-h1 mb-sm",
"isPageHeading": true
}
}) %}
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="tel-id-2">Número de teléfono</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="tel-id-2" name="tel-name-2" type="text">
</div>
<!-- /input -->
{% endcall %}HTML
<!-- fieldset -->
<fieldset>
<legend class="c-h1 mb-sm">
<h1>
¿Cuál es tu número de teléfono?
</h1>
</legend>
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="tel-id-2">Número de teléfono</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="tel-id-2" name="tel-name-2" type="text">
</div>
<!-- /input -->
</fieldset>
<!-- /fieldset -->
Con label como encabezado con h3 #
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>.
Mostrar códigodel ejemplo: Con label como encabezado con h3
Contenido
Nunjucks macro
{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
"legend": {
"text": "¿Cuál es tu número de teléfono?",
"classes": "c-h3 mb-sm",
"isPageHeading": true
},
"headingLevel": 3
}) %}
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="tel-id-3">Número de teléfono</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="tel-id-3" name="tel-name-3" type="text">
</div>
<!-- /input -->
{% endcall %}HTML
<!-- fieldset -->
<fieldset>
<legend class="c-h3 mb-sm">
<h3>
¿Cuál es tu número de teléfono?
</h3>
</legend>
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="tel-id-3">Número de teléfono</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="tel-id-3" name="tel-name-3" type="text">
</div>
<!-- /input -->
</fieldset>
<!-- /fieldset -->
Con clases de css aplicadas #
Mostrar códigodel ejemplo: Con clases de css aplicadas
Contenido
Nunjucks macro
{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
"legend": {
"text": "¿Cuál es tu número de teléfono?",
"classes": "mb-sm -ml-base px-base bg-white"
},
"classes": "p-lg border border-neutral-base"
}) %}
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="tel-id-4">Número de teléfono</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="tel-id-4" name="tel-name-4" type="text">
</div>
<!-- /input -->
{% endcall %}HTML
<!-- fieldset -->
<fieldset class="p-lg border border-neutral-base">
<legend class="mb-sm -ml-base px-base bg-white">
¿Cuál es tu número de teléfono?
</legend>
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="tel-id-4">Número de teléfono</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="tel-id-4" name="tel-name-4" type="text">
</div>
<!-- /input -->
</fieldset>
<!-- /fieldset -->