label

// src/components/elements/form-element/label/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/form-element/label
additionalProperties: false
required:
  - title
properties:
  attributes:
    type: string
  classes:
    type: array
    items:
      type: string
  for:
    type: string
  icon:
    type: boolean
  icon_name:
    type: string
  required:
    type: boolean
  title:
    type: string
  large:
    type: boolean
  visually_hidden:
    type: boolean

// src/components/elements/form-element/label/mocks.yaml

title: Input label
for: foo
$variants:
  - $name: Required
    required: true
  - $name: long label
    title: >-
      Für den Fall, dass meine Bewerbung nicht erfolgreich ist, dürfen meine
      Bewerberdaten für weitere Stellenausschreibungen aufbewahrt werden. Die
      konkrete Dauer finden Sie hier
  - $name: large
    title: File upload
    large: true
  - $name: Icon
    title: Write a comment
    icon: true
    icon_name: edit

// src/components/elements/form-element/label/label.twig

<label{{ attributes }}
	for="{{ for }}"
	class="FormElementLabel
		{{ classes|join(" ") }}
		{%- if large %} u-typo-HeadlineS{% else %} u-typo-TextM{% endif -%}
		{%- if visually_hidden %} visually-hidden{% endif -%}
		{%- if icon %} FormElementLabel--icon{% endif -%}
	"
>
	{% if icon %}
		{% include "@elements/icon/icon.twig" with {
			name: icon_name,
			classes: ["FormElementLabel-icon"],
		} only %}
	{% endif %}
	<span>{{ title }}</span>{%- if required %}<span aria-hidden="true">*</span>{% endif %}
</label>