Fieldset examples

Show params

Params

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.

default

What is your phone number?
Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
  "legend": {
    "text": "What is your phone number?",
    "classes": "mb-sm"
  },
  "caller": "<label class=\" block \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">"
})  %}
    <label class=" block " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 " name="contact-phone" type="text" id="contact-phone">
{% endcall %}

Markup

<!-- fieldset -->
<fieldset>
  <legend class="mb-sm">
    What is your phone number?
  </legend>
  <label class=" block " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 " name="contact-phone" type="text" id="contact-phone">
</fieldset>
<!-- /fieldset -->

with error

Show code to display the aria-errormessage applied in html

What is your phone number?
Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
  "legend": {
    "text": "What is your phone number?",
    "classes": "mb-sm"
  },
  "errorId": "error-id",
  "caller": "<label class=\" block \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">"
})  %}
    <label class=" block " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 " name="contact-phone" type="text" id="contact-phone">
{% endcall %}

Markup

<!-- fieldset -->
<fieldset aria-errormessage="error-id">
  <legend class="mb-sm">
    What is your phone number?
  </legend>
  <label class=" block " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 " name="contact-phone" type="text" id="contact-phone">
</fieldset>
<!-- /fieldset -->

as page heading

What is your phone number?

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
  "legend": {
    "text": "What is your phone number?",
    "classes": "c-h1 mb-sm",
    "isPageHeading": true
  },
  "caller": "<label class=\" block \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">"
})  %}
    <label class=" block " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 " name="contact-phone" type="text" id="contact-phone">
{% endcall %}

Markup

<!-- fieldset -->
<fieldset>
  <legend class="c-h1 mb-sm">
    
      <h1>What is your phone number?</h1>
  </legend>
  <label class=" block " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 " name="contact-phone" type="text" id="contact-phone">
</fieldset>
<!-- /fieldset -->

as page heading with headingLevel 3

What is your phone number?

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
  "legend": {
    "text": "What is your phone number?",
    "classes": "c-h3 mb-sm",
    "isPageHeading": true
  },
  "headingLevel": 3,
  "caller": "<label class=\" block \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">"
})  %}
    <label class=" block " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 " name="contact-phone" type="text" id="contact-phone">
{% endcall %}

Markup

<!-- fieldset -->
<fieldset>
  <legend class="c-h3 mb-sm">
      <h3>What is your phone number?</h3>
  </legend>
  <label class=" block " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 " name="contact-phone" type="text" id="contact-phone">
</fieldset>
<!-- /fieldset -->

with classes applied

What is your phone number?
Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
  "legend": {
    "text": "What is your phone number?",
    "classes": "mb-sm"
  },
  "classes": "p-base bg-warning-light",
  "caller": "<label class=\" block \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">"
})  %}
    <label class=" block " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 " name="contact-phone" type="text" id="contact-phone">
{% endcall %}

Markup

<!-- fieldset -->
<fieldset class="p-base bg-warning-light">
  <legend class="mb-sm">
    What is your phone number?
  </legend>
  <label class=" block " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 " name="contact-phone" type="text" id="contact-phone">
</fieldset>
<!-- /fieldset -->