DSO Component Library

# Group Static: Default

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <div class="form-group dso-static">
        <div class="dso-label-container">
            <label class="control-label">Kleur van object</label>
        </div>
        <div class="dso-field-container">
            <p>Rood</p>
        </div>
    </div>

`
`

    <div class="form-group dso-static">
      <div class="dso-label-container">
        <label class="control-label">{{ label }}</label>
      </div>
      <div class="dso-field-container">
        <p>{{ value }}</p>
      </div>
    </div>

`
`

    label: Kleur van object
    value: Rood

`

- Handle: @group-static--default
- Variants (2): Default , Static
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\01-groups\group-static.hbs

There are no notes for this item.

### WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

`<label class="control-label">Kleur van object</label>`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

`<title>Group Static`

### NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

`<button type="submit" class="hidden">VALIDATOR_ONLY</button>`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

`<form class="form-horizontal"> <!-- Start: @group-static--default --> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> <!-- End: @group-static--default --><hr> <!-- Start: @group-static--static --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static</h2> <p>Een static input kan informatie tonen die van belang is in een formulier zonder dat er een keuze gemaakt dient te worden.</p> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

`<form class="form-horizontal"> <!-- Start: @group-static--default --> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> <!-- End: @group-static--default --><hr> <!-- Start: @group-static--static --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static</h2> <p>Een static input kan informatie tonen die van belang is in een formulier zonder dat er een keuze gemaakt dient te worden.</p> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

`<form class="form-horizontal"> <!-- Start: @group-static--default --> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> <!-- End: @group-static--default --><hr> <!-- Start: @group-static--static --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static</h2> <p>Een static input kan informatie tonen die van belang is in een formulier zonder dat er een keuze gemaakt dient te worden.</p> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

`<form class="form-horizontal"> <!-- Start: @group-static--default --> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> <!-- End: @group-static--default --><hr> <!-- Start: @group-static--static --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static</h2> <p>Een static input kan informatie tonen die van belang is in een formulier zonder dat er een keuze gemaakt dient te worden.</p> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`