Input Label Display Adjust the display of a particular input label. Important Notes: The displayType prop on form-label.twig determines how an input label is visually displayed. floating will render a floating label, while block will render a block label before the form input. For block labels, it is also needed to set the labelDisplay prop to before on form-element.twig. Demo

Fieldset Legend

Twig
{% set form_children %}
  {% set fieldset_children %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Floating Label',
        displayType: 'floating',
        attributes: {
          for: 'floating-label',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter value (floating label)',
          type: 'text',
          id: 'floating-label',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: '<strong>Block Label</strong>',
        displayType: 'block',
        attributes: {
          for: 'block-label',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter value (block label)',
          type: 'text',
          id: 'block-label',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
      labelDisplay: 'before',
    } only %}
  {% endset %}

  {% include '@bolt-components-form/form-fieldset.twig' with {
    legendTitle: 'Fieldset Legend',
    legendInnerAttributes: {
      class: 'u-bolt-visuallyhidden',
    },
    children: fieldset_children,
  } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only %}
HTML
Not available in plain HTML. Please use Twig.