label

Information

Folder
src/components/elements/form-element/label

Files

Schema
// 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
  required:
    type: boolean
  title:
    type: string
  large:
    type: boolean
Mocks
// 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
Template
// 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 required %} is-required{% endif -%}
	"
>
	<span>{{ title }}</span>
</label>

Variants

default
Open
Required
Open
long label
Open
large
Open