Sha256: f272c2addcb8441235ddd721bff9e064036d08d80d4f0b9ef157be26c4645608

Contents?: true

Size: 1.75 KB

Versions: 22

Compression:

Stored size: 1.75 KB

Contents

name: Form fieldset
description: The fieldset element is used to group several controls within a web form. The legend element represents a caption for the content of its parent fieldset.
body: |
  [Using the fieldset and legend elements](https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/)

  You can use the 'text' property or pass 'text' as a block.
accessibility_criteria: |
  - must give inputs within the fieldset context with legend text
examples:
  default:
    data:
      legend_text: 'Do you have a passport?'
      text: |
        <!-- Use the radio component, this is hardcoded only for this example -->
        <input type="radio" id="default-yes" name="default"t>
        <label for="default-yes">Yes</label>

        <input type="radio" id="default-no" name="default"t>
        <label for="default-no">No</label>
  with_html_legend:
    description: 'If you only have one fieldset on the page you might want to include the title of the page as the legend text. Used with a [captured](http://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-capture) [title](http://components.publishing.service.gov.uk/component-guide/title)'
    data:
      legend_text: |
        <!-- Use the title component, this is hardcoded only for this example -->
        <h1 style="font-size: 48px; line-height: 1.0416666667; font-weight: bold; margin: 0 0 30px 0;">
          Do you have a passport?
        </h1>
      text: |
        <!-- Use the radio component, this is hardcoded only for this example -->
        <input type="radio" id="html-legend-yes" name="html-legend">
        <label for="html-legend-yes">Yes</label>

        <input type="radio" id="html-legend-no" name="html-legend">
        <label for="html-legend-no">No</label>

Version data entries

22 entries across 22 versions & 1 rubygems

Version Path
govuk_publishing_components-21.1.1 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-21.1.0 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-21.0.0 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-20.5.2 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-20.5.1 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-20.5.0 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-20.4.0 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-20.3.0 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-20.2.2 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-20.2.1 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-20.2.0 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-20.1.0 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-20.0.0 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-19.0.0 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-18.3.1 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-18.3.0 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-18.2.0 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-18.1.2 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-18.1.1 app/views/govuk_publishing_components/components/docs/fieldset.yml
govuk_publishing_components-18.1.0 app/views/govuk_publishing_components/components/docs/fieldset.yml