BBR

Korrekt

Parat til dokumentation

<div class="form-floating is-required">
    <select class="form-select  is-valid" id="floatingSelect" aria-label="" required>
        <option disabled>Vælg fra menuen</option>
        <option value="Første emne">Første emne</option>
        <option value="Andet emne" selected>Andet emne</option>
        <option value="Tredje emne">Tredje emne</option>
    </select>
    <label for="floatingSelect">Dette er en select menu</label>
    <div class="valid-feedback">
        Korrekt
    </div>
</div>
 
{{#if isInline}}
<select class="form-select" aria-label="{{placholder}}">
    <option {{#if isSelected}}selected{{/if}} disabled>Vælg fra menuen</option>
    {{#each options}}
    <option value="{{value}}" {{#if optionIsSelected}}selected{{/if}}>{{value}}</option>
    {{/each}}
</select>
{{else}}
<div class="form-floating {{#if isRequired}}is-required{{/if}}">
    <select class="form-select {{#if isInvalid}}is-invalid{{/if}} {{#if isValid}}is-valid{{/if}}" id="floatingSelect"
        aria-label="{{placholder}}" {{#if isRequired}}required{{/if}}>
        <option {{#if isSelected}}selected{{/if}} disabled>Vælg fra menuen</option>
        {{#if options}}
        {{#each options}}
        <option value="{{value}}" {{#if optionIsSelected}}selected{{/if}}>{{value}}</option>
        {{/each}}
        {{else}}
        <option value="valg1" selected>Valg 1</option>
        <option value="valg2" selected>Valg 2</option>
        <option value="valg3" selected>Valg 3</option>
        {{/if}}
    </select>
    <label for="floatingSelect">{{placeholder}}</label>
    {{#if isInvalid}}
    <div class="invalid-feedback">
        {{validationMessage}}
    </div>
    {{/if}}
    {{#if isValid}}
    <div class="valid-feedback">
        {{validationMessage}}
    </div>
    {{/if}}
    {{#if helpText}}
    <small class="text-muted">{{helpText}}</small>
    {{/if}}
</div>
{{/if}}
 
{
  "placeholder": "Dette er en select menu",
  "isSelected": false,
  "options": [
    {
      "value": "Første emne"
    },
    {
      "value": "Andet emne",
      "optionIsSelected": true
    },
    {
      "value": "Tredje emne"
    }
  ],
  "validationMessage": "Korrekt",
  "isValid": true,
  "isRequired": true
}