ComponentFieldset

4 of 4 upstream examples match. Razor component: <NhsukFieldset>

Default

Matches upstream

What is your address?

Razor Pages and MVC

<nhsuk-fieldset
    legend-options="@(new LegendOptions
    {
        Heading = "What is your address?",
        Size = "l",
    })"
/>

Blazor

<NhsukFieldset
    Legend="@(new LegendOptions
    {
        Heading = "What is your address?",
        Size = "l",
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/fieldset/macro.njk" import fieldset %}

{{ fieldset({
  "legend": {
    "heading": "What is your address?",
    "size": "l"
  }
}) }}

With HTML

Matches upstream

Open on its own page (opens in new tab)

About youWhat is your address?

Address line 1

Address line 2 (optional)

Town or city

Postcode

Razor Pages and MVC

<nhsuk-fieldset
    legend-options="@(new LegendOptions
    {
        Caption = "About you",
        Heading = "What is your address?",
        Size = "l",
    })"
    html=@(@"<div class=""nhsuk-form-group"">
  <label class=""nhsuk-label"" for=""address-line1"">
    Address line 1
  </label>
  <input class=""nhsuk-input"" id=""address-line1"" name=""address-line1"" type=""text"" autocomplete=""address-line1"">
</div>

<div class=""nhsuk-form-group"">
  <label class=""nhsuk-label"" for=""address-line2"">
    Address line 2 (optional)
  </label>
  <input class=""nhsuk-input"" id=""address-line2"" name=""address-line2"" type=""text"" autocomplete=""address-line2"">
</div>

<div class=""nhsuk-form-group"">
  <label class=""nhsuk-label"" for=""address-town"">
    Town or city
  </label>
  <input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""address-town"" name=""address-town"" type=""text"" autocomplete=""address-level2"">
</div>

<div class=""nhsuk-form-group"">
  <label class=""nhsuk-label"" for=""address-postcode"">
    Postcode
  </label>
  <input class=""nhsuk-input nhsuk-input--width-10"" id=""address-postcode"" name=""address-postcode"" type=""text"" autocomplete=""postal-code"">
</div>
")
/>

Blazor

<NhsukFieldset
    Legend="@(new LegendOptions
    {
        Caption = "About you",
        Heading = "What is your address?",
        Size = "l",
    })"
    Html=@(@"<div class=""nhsuk-form-group"">
  <label class=""nhsuk-label"" for=""address-line1"">
    Address line 1
  </label>
  <input class=""nhsuk-input"" id=""address-line1"" name=""address-line1"" type=""text"" autocomplete=""address-line1"">
</div>

<div class=""nhsuk-form-group"">
  <label class=""nhsuk-label"" for=""address-line2"">
    Address line 2 (optional)
  </label>
  <input class=""nhsuk-input"" id=""address-line2"" name=""address-line2"" type=""text"" autocomplete=""address-line2"">
</div>

<div class=""nhsuk-form-group"">
  <label class=""nhsuk-label"" for=""address-town"">
    Town or city
  </label>
  <input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""address-town"" name=""address-town"" type=""text"" autocomplete=""address-level2"">
</div>

<div class=""nhsuk-form-group"">
  <label class=""nhsuk-label"" for=""address-postcode"">
    Postcode
  </label>
  <input class=""nhsuk-input nhsuk-input--width-10"" id=""address-postcode"" name=""address-postcode"" type=""text"" autocomplete=""postal-code"">
</div>
")
/>

Nunjucks (upstream)

{% from "nhsuk/components/fieldset/macro.njk" import fieldset %}

{{ fieldset({
  "legend": {
    "caption": "About you",
    "heading": "What is your address?",
    "size": "l"
  },
  "html": "<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"address-line1\">\n    Address line 1\n  </label>\n  <input class=\"nhsuk-input\" id=\"address-line1\" name=\"address-line1\" type=\"text\" autocomplete=\"address-line1\">\n</div>\n\n<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"address-line2\">\n    Address line 2 (optional)\n  </label>\n  <input class=\"nhsuk-input\" id=\"address-line2\" name=\"address-line2\" type=\"text\" autocomplete=\"address-line2\">\n</div>\n\n<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"address-town\">\n    Town or city\n  </label>\n  <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"address-town\" name=\"address-town\" type=\"text\" autocomplete=\"address-level2\">\n</div>\n\n<div class=\"nhsuk-form-group\">\n  <label class=\"nhsuk-label\" for=\"address-postcode\">\n    Postcode\n  </label>\n  <input class=\"nhsuk-input nhsuk-input--width-10\" id=\"address-postcode\" name=\"address-postcode\" type=\"text\" autocomplete=\"postal-code\">\n</div>\n"
}) }}

With HTML via call block

Matches upstream

Open on its own page (opens in new tab)

About youWhat is your address?

Address line 1

Address line 2 (optional)

Town or city

Postcode

Razor Pages and MVC

<nhsuk-fieldset
    legend-options="@(new LegendOptions
    {
        Caption = "About you",
        Heading = "What is your address?",
        Size = "l",
    })"
>
    <div class="nhsuk-form-group">
      <label class="nhsuk-label" for="address-line1">
        Address line 1
      </label>
      <input class="nhsuk-input" id="address-line1" name="address-line1" type="text" autocomplete="address-line1">
    </div>
    
    <div class="nhsuk-form-group">
      <label class="nhsuk-label" for="address-line2">
        Address line 2 (optional)
      </label>
      <input class="nhsuk-input" id="address-line2" name="address-line2" type="text" autocomplete="address-line2">
    </div>
    
    <div class="nhsuk-form-group">
      <label class="nhsuk-label" for="address-town">
        Town or city
      </label>
      <input class="nhsuk-input nhsuk-u-width-two-thirds" id="address-town" name="address-town" type="text" autocomplete="address-level2">
    </div>
    
    <div class="nhsuk-form-group">
      <label class="nhsuk-label" for="address-postcode">
        Postcode
      </label>
      <input class="nhsuk-input nhsuk-input--width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
    </div>
</nhsuk-fieldset>

Blazor

<NhsukFieldset
    Legend="@(new LegendOptions
    {
        Caption = "About you",
        Heading = "What is your address?",
        Size = "l",
    })"
>
    <div class="nhsuk-form-group">
      <label class="nhsuk-label" for="address-line1">
        Address line 1
      </label>
      <input class="nhsuk-input" id="address-line1" name="address-line1" type="text" autocomplete="address-line1">
    </div>
    
    <div class="nhsuk-form-group">
      <label class="nhsuk-label" for="address-line2">
        Address line 2 (optional)
      </label>
      <input class="nhsuk-input" id="address-line2" name="address-line2" type="text" autocomplete="address-line2">
    </div>
    
    <div class="nhsuk-form-group">
      <label class="nhsuk-label" for="address-town">
        Town or city
      </label>
      <input class="nhsuk-input nhsuk-u-width-two-thirds" id="address-town" name="address-town" type="text" autocomplete="address-level2">
    </div>
    
    <div class="nhsuk-form-group">
      <label class="nhsuk-label" for="address-postcode">
        Postcode
      </label>
      <input class="nhsuk-input nhsuk-input--width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
    </div>
</NhsukFieldset>

Nunjucks (upstream)

{% from "nhsuk/components/fieldset/macro.njk" import fieldset %}

{% call fieldset({
  "legend": {
    "caption": "About you",
    "heading": "What is your address?",
    "size": "l"
  }
}) %}
  <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-line1">
    Address line 1
  </label>
  <input class="nhsuk-input" id="address-line1" name="address-line1" type="text" autocomplete="address-line1">
</div>

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-line2">
    Address line 2 (optional)
  </label>
  <input class="nhsuk-input" id="address-line2" name="address-line2" type="text" autocomplete="address-line2">
</div>

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-town">
    Town or city
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="address-town" name="address-town" type="text" autocomplete="address-level2">
</div>

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-postcode">
    Postcode
  </label>
  <input class="nhsuk-input nhsuk-input--width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
</div>
{% endcall %}

Without legend heading

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC

<nhsuk-fieldset legend="What is your address?" />

Blazor

<NhsukFieldset Legend="@("What is your address?")" />

Nunjucks (upstream)

{% from "nhsuk/components/fieldset/macro.njk" import fieldset %}

{{ fieldset({
  "legend": "What is your address?"
}) }}