Label examples

Show params

Params

params:
- name: text
  type: string
  required: true
  description: If `html` is set, this is not required. Text to use within the label. 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 label. If `html` is provided, the `text` argument will be ignored.
- name: for
  type: string
  required: true
  description: The value of the for attribute, the id of the input the label is associated with.
- name: isPageHeading
  type: boolean
  required: false
  description: Whether the label 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 label tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the label tag.

default

Show code

Macro

{% from "components/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
  "text": "Label text goes here"
})  }}

Markup


<!-- label -->
<label class="block">Label text goes here</label>

<!-- /label -->

with classes applied

Show code

Macro

{% from "components/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
  "classes": "inline-block bg-warning-light",
  "text": "Label text goes here"
})  }}

Markup


<!-- label -->
<label class="block inline-block bg-warning-light">Label text goes here</label>

<!-- /label -->

as page heading

Show code

Macro

{% from "components/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
  "text": "Label text goes here",
  "classes": "c-h1",
  "isPageHeading": true
})  }}

Markup


<!-- label -->
    <h1 class="block "><label class="block c-h1">Label text goes here</label>
  </h1>
<!-- /label -->

as page heading with headingLevel 3

Show code

Macro

{% from "components/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
  "text": "Label text goes here",
  "classes": "c-h3",
  "isPageHeading": true,
  "headingLevel": "3"
})  }}

Markup


<!-- label -->
    <h3 class="block "><label class="block c-h3">Label text goes here</label>
  </h3>
<!-- /label -->