form-element

This component is the wrapper for

  • a label,
  • an input, a select, a textarea, a checkbox or a radio button,
  • error messages,
  • additional information which belongs to this form element.

Since inputs, selects, textareas, checkboxes and radio buttons should never be used without a label, we should always use this component to ensure accessibility.

Information

Folder
src/components/fsk/form/form-element

Files

Schema 
// src/components/fsk/form/form-element/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /fsk/form/form-element
additionalProperties: false
properties:
  attributes:
    type: object
  children:
    type: string
    format: html
  description:
    type: object
    properties:
      content:
        type: string
        format: html
      attributes:
        type: object
  description_display:
    type: string
    enum:
      - after
      - before
      - invisible
  label:
    type: string
    format: html
  label_display:
    type: string
    enum:
      - after
      - before
      - invisible
  prefix:
    type: string
  suffix:
    type: string
  disabled:
    type: boolean
  errors:
    type: string
    format: html
  title_display:
    type: string
    enum:
      - after
      - before
required:
  - attributes
  - children
  - description
Mocks 
// src/components/fsk/form/form-element/mocks.yaml

$hidden: true
attributes:
  $drupal: true
description: {}
label:
  $tpl: '@fsk/form/form-element/form-element-label'
  $ref: '@fsk/form/form-element/form-element-label'
label_display: before
$variants:
  - $name: Input
    label:
      attributes:
        for: input1
    children:
      $tpl: '@fsk/form/form-element/input/input--textfield'
      $ref: '@fsk/form/form-element/input/input--textfield'
      attributes:
        id: input1
  - $name: Input invalid
    label:
      attributes:
        for: input2
    children:
      $tpl: '@fsk/form/form-element/input/input--textfield'
      $ref: '@fsk/form/form-element/input/input--textfield#invalid'
      attributes:
        id: input2
    errors: <p>This is an error message.</p>
  - $name: Input with description
    label:
      attributes:
        for: input2
    children:
      $tpl: '@fsk/form/form-element/input/input--textfield'
      $ref: '@fsk/form/form-element/input/input--textfield'
      attributes:
        id: input2
    description_display: after
    description:
      attributes:
        $drupal: true
      content: <p>This is a description.</p>
  - $name: Input invalid with description
    label:
      attributes:
        for: input2
    children:
      $tpl: '@fsk/form/form-element/input/input--textfield'
      $ref: '@fsk/form/form-element/input/input--textfield#invalid'
      attributes:
        id: input2
    errors: <p>This is an error message.</p>
    description_display: after
    description:
      attributes:
        $drupal: true
      content: <p>This is a description.</p>
  - $name: Select
    label:
      attributes:
        for: input3
    children:
      $tpl: '@fsk/form/form-element/input/select'
      $ref: '@fsk/form/form-element/input/select'
      attributes:
        id: input3
  - $name: Textarea
    label:
      attributes:
        for: input4
    children:
      $tpl: '@fsk/form/form-element/input/textarea'
      $ref: '@fsk/form/form-element/input/textarea'
      attributes:
        id: input4
  - $name: Checkbox
    label:
      attributes:
        for: input5
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--checkbox'
      $ref: '@fsk/form/form-element/input/input--checkbox'
      attributes:
        id: input5
  - $name: Checkbox invalid
    label:
      attributes:
        for: input6
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--checkbox'
      $ref: '@fsk/form/form-element/input/input--checkbox#invalid'
      attributes:
        id: input6
    errors: <p>This is an error message.</p>
  - $name: Checkbox checked
    label:
      attributes:
        for: input7
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--checkbox'
      $ref: '@fsk/form/form-element/input/input--checkbox#checked'
      attributes:
        id: input7
  - $name: Checkbox disabled
    label:
      attributes:
        for: input8
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--checkbox'
      $ref: '@fsk/form/form-element/input/input--checkbox#disabled'
      attributes:
        id: input8
  - $name: Checkbox invalid and checked
    label:
      attributes:
        for: input9
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--checkbox'
      $ref: '@fsk/form/form-element/input/input--checkbox#invalid-and-checked'
      attributes:
        id: input9
    errors: <p>This is an error message.</p>
  - $name: Checkbox invalid and disabled
    label:
      attributes:
        for: input10
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--checkbox'
      $ref: '@fsk/form/form-element/input/input--checkbox#invalid-and-disabled'
      attributes:
        id: input10
    errors: <p>This is an error message.</p>
  - $name: Checkbox checked and disabled
    label:
      attributes:
        for: input11
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--checkbox'
      $ref: '@fsk/form/form-element/input/input--checkbox#checked-and-disabled'
      attributes:
        id: input11
  - $name: Checkbox checked and disabled and invalid
    label:
      attributes:
        for: input12
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--checkbox'
      $ref: >-
        @fsk/form/form-element/input/input--checkbox#checked-and-disabled-and-invalid
      attributes:
        id: input12
    errors: <p>This is an error message.</p>
  - $name: Radio
    label:
      attributes:
        for: input13
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--radio'
      $ref: '@fsk/form/form-element/input/input--radio'
      attributes:
        id: input13
  - $name: Radio invalid
    label:
      attributes:
        for: input14
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--radio'
      $ref: '@fsk/form/form-element/input/input--radio#invalid'
      attributes:
        id: input14
    errors: <p>This is an error message.</p>
  - $name: Radio checked
    label:
      attributes:
        for: input15
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--radio'
      $ref: '@fsk/form/form-element/input/input--radio#checked'
      attributes:
        id: input15
  - $name: Radio disabled
    label:
      attributes:
        for: input16
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--radio'
      $ref: '@fsk/form/form-element/input/input--radio#disabled'
      attributes:
        id: input16
  - $name: Radio invalid and checked
    label:
      attributes:
        for: input17
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--radio'
      $ref: '@fsk/form/form-element/input/input--radio#invalid-and-checked'
      attributes:
        id: input17
    errors: <p>This is an error message.</p>
  - $name: Radio invalid and disabled
    label:
      attributes:
        for: input18
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--radio'
      $ref: '@fsk/form/form-element/input/input--radio#invalid-and-disabled'
      attributes:
        id: input18
    errors: <p>This is an error message.</p>
  - $name: Radio checked and disabled
    label:
      attributes:
        for: input19
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--radio'
      $ref: '@fsk/form/form-element/input/input--radio#checked-and-disabled'
      attributes:
        id: input19
  - $name: Radio checked and disabled and invalid
    label:
      attributes:
        for: input20
    label_display: after
    children:
      $tpl: '@fsk/form/form-element/input/input--radio'
      $ref: >-
        @fsk/form/form-element/input/input--radio#checked-and-disabled-and-invalid
      attributes:
        id: input20
    errors: <p>This is an error message.</p>
  - $name: Submit
    label: ''
    children:
      $tpl: '@fsk/form/form-element/input/input--submit'
      $ref: '@fsk/form/form-element/input/input--submit#primary-button'
      attributes:
        value: Submit
Template 
// src/components/fsk/form/form-element/form-element.html.twig

<div{{ attributes ? attributes|without("class") : "" }} class="FskFormElement{{ errors and errors|length > 0 ? " FskFormElement--error" : "" }} {{ attributes.class }}">
  {% if label and label|length > 0 and label_display in ['before', 'invisible'] %}
    {{ label }}
  {% endif %}
  {% if prefix is not empty %}
    <span class="FskFormElement-prefix">{{ prefix }}</span>
  {% endif %}
  {% if description_display == 'before' and description.content %}
    <div{{ description.attributes }}>
      {{ description.content }}
    </div>
  {% endif %}
  {{ children }}
  {% if suffix is not empty %}
    <span class="FskFormElement-suffix">{{ suffix }}</span>
  {% endif %}
  {% if label and label|length > 0 and label_display == 'after' %}
    {{ label }}
  {% endif %}
  <div class="FskFormElement-errorMessage" role="alert">{% if errors %}{{ errors }}{% endif %}</div>
  {% if description_display in ['after', 'invisible'] and description.content %}
    <div{{ description.attributes ? description.attributes|without("class") : "" }} class="FskFormElement-description {{ description_display == "invisible" ? "u-hiddenVisually" : "" }}">
      {{ description.content }}
    </div>
  {% endif %}
</div>

Variants

Input
Open
Input invalid
Open
Input with description
Open

This is a description.

Input invalid with description
Open

This is a description.

Select
Open
Textarea
Open
Checkbox
Open
Checkbox invalid
Open
Checkbox checked
Open
Checkbox disabled
Open
Checkbox invalid and checked
Open
Checkbox invalid and disabled
Open
Checkbox checked and disabled
Open
Checkbox checked and disabled and invalid
Open
Radio
Open
Radio invalid
Open
Radio checked
Open
Radio disabled
Open
Radio invalid and checked
Open
Radio invalid and disabled
Open
Radio checked and disabled
Open
Radio checked and disabled and invalid
Open
Submit
Open