Select examples

• # default

  Open this example in a new tab

  {
    "name": "select-1",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2",
        "selected": true
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3",
        "disabled": true
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "name": "select-1",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2",
        "selected": true
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3",
        "disabled": true
      }
    ]
  }) }}
          

• # with hint text and error message

  Open this example in a new tab

  Hint text goes here

  Error message goes here

  {
    "id": "select-2",
    "name": "select-2",
    "label": {
      "text": "Label text goes here"
    },
    "hint": {
      "text": "Hint text goes here"
    },
    "errorMessage": {
      "text": "Error message goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3"
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "select-2",
    "name": "select-2",
    "label": {
      "text": "Label text goes here"
    },
    "hint": {
      "text": "Hint text goes here"
    },
    "errorMessage": {
      "text": "Error message goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3"
      }
    ]
  }) }}
          

• # with label as page heading

  Open this example in a new tab

  {
    "id": "select-3",
    "name": "select-3",
    "label": {
      "text": "Label text goes here",
      "classes": "govuk-label--l",
      "isPageHeading": true
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2",
        "selected": true
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3",
        "disabled": true
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "select-3",
    "name": "select-3",
    "label": {
      "text": "Label text goes here",
      "classes": "govuk-label--l",
      "isPageHeading": true
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2",
        "selected": true
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3",
        "disabled": true
      }
    ]
  }) }}
          

• # with full width override

  Open this example in a new tab

  {
    "id": "select-1",
    "name": "select-1",
    "classes": "govuk-!-width-full",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2",
        "selected": true
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3",
        "disabled": true
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "select-1",
    "name": "select-1",
    "classes": "govuk-!-width-full",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2",
        "selected": true
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3",
        "disabled": true
      }
    ]
  }) }}
          

• # with describedBy

  Open this example in a new tab

  {
    "id": "with-describedby",
    "name": "with-describedby",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      }
    ],
    "describedBy": "test-target-element"
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "with-describedby",
    "name": "with-describedby",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      }
    ],
    "describedBy": "test-target-element"
  }) }}
          

• # attributes

  Open this example in a new tab

  {
    "id": "with-attributes",
    "name": "with-attributes",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      }
    ],
    "attributes": {
      "data-attribute": "my data value"
    }
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "with-attributes",
    "name": "with-attributes",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      }
    ],
    "attributes": {
      "data-attribute": "my data value"
    }
  }) }}
          

• # attributes on items

  Open this example in a new tab

  {
    "id": "with-item-attributes",
    "name": "with-item-attributes",
    "label": {
      "text": "Label text goes here"
    },
    "value": 2,
    "items": [
      {
        "text": "Option 1",
        "value": 1,
        "attributes": {
          "data-attribute": "ABC",
          "data-second-attribute": "DEF"
        }
      },
      {
        "text": "Option 2",
        "value": 2,
        "attributes": {
          "data-attribute": "GHI",
          "data-second-attribute": "JKL"
        }
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "with-item-attributes",
    "name": "with-item-attributes",
    "label": {
      "text": "Label text goes here"
    },
    "value": 2,
    "items": [
      {
        "text": "Option 1",
        "value": 1,
        "attributes": {
          "data-attribute": "ABC",
          "data-second-attribute": "DEF"
        }
      },
      {
        "text": "Option 2",
        "value": 2,
        "attributes": {
          "data-attribute": "GHI",
          "data-second-attribute": "JKL"
        }
      }
    ]
  }) }}
          

• # with falsy items

  Open this example in a new tab

  {
    "id": "with-falsy-items",
    "name": "with-falsy-items",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "text": "Option 1",
        "value": 1
      },
      null,
      false,
      "",
      {
        "text": "Options 2",
        "value": 2
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "with-falsy-items",
    "name": "with-falsy-items",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "text": "Option 1",
        "value": 1
      },
      null,
      false,
      "",
      {
        "text": "Options 2",
        "value": 2
      }
    ]
  }) }}
          

• # hint

  Open this example in a new tab

  Hint text goes here

  {
    "id": "select-with-hint",
    "name": "select-with-hint",
    "label": {
      "text": "Label text goes here"
    },
    "hint": {
      "text": "Hint text goes here"
    }
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "select-with-hint",
    "name": "select-with-hint",
    "label": {
      "text": "Label text goes here"
    },
    "hint": {
      "text": "Hint text goes here"
    }
  }) }}
          

• # hint and describedBy

  Open this example in a new tab

  Hint text goes here

  {
    "id": "select-with-hint",
    "name": "select-with-hint",
    "label": {
      "text": "Label text goes here"
    },
    "describedBy": "test-target-element",
    "hint": {
      "text": "Hint text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "select-with-hint",
    "name": "select-with-hint",
    "label": {
      "text": "Label text goes here"
    },
    "describedBy": "test-target-element",
    "hint": {
      "text": "Hint text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      }
    ]
  }) }}
          

• # error

  Open this example in a new tab

  Error message

  {
    "id": "select-with-error",
    "name": "select-with-error",
    "label": {
      "text": "Label text goes here"
    },
    "errorMessage": {
      "text": "Error message"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "select-with-error",
    "name": "select-with-error",
    "label": {
      "text": "Label text goes here"
    },
    "errorMessage": {
      "text": "Error message"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      }
    ]
  }) }}
          

• # error and describedBy

  Open this example in a new tab

  Error message

  {
    "id": "select-with-error",
    "name": "select-with-error",
    "label": {
      "text": "Label text goes here"
    },
    "describedBy": "test-target-element",
    "errorMessage": {
      "text": "Error message"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "select-with-error",
    "name": "select-with-error",
    "label": {
      "text": "Label text goes here"
    },
    "describedBy": "test-target-element",
    "errorMessage": {
      "text": "Error message"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      }
    ]
  }) }}
          

• # without values

  Open this example in a new tab

  {
    "name": "colors",
    "id": "colors",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "text": "Red"
      },
      {
        "text": "Green"
      },
      {
        "text": "Blue"
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "name": "colors",
    "id": "colors",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "text": "Red"
      },
      {
        "text": "Green"
      },
      {
        "text": "Blue"
      }
    ]
  }) }}
          

• # without values with selected value

  Open this example in a new tab

  {
    "name": "colors",
    "id": "colors",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "text": "Red"
      },
      {
        "text": "Green"
      },
      {
        "text": "Blue"
      }
    ],
    "value": "Green"
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "name": "colors",
    "id": "colors",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "text": "Red"
      },
      {
        "text": "Green"
      },
      {
        "text": "Blue"
      }
    ],
    "value": "Green"
  }) }}
          

• # with falsy values

  Open this example in a new tab

  {
    "name": "falsy-values",
    "id": "falsy-values",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "text": "Empty string",
        "value": ""
      },
      {
        "text": "Boolean false",
        "value": false
      },
      {
        "text": "Number zero",
        "value": 0
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "name": "falsy-values",
    "id": "falsy-values",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "text": "Empty string",
        "value": ""
      },
      {
        "text": "Boolean false",
        "value": false
      },
      {
        "text": "Number zero",
        "value": 0
      }
    ]
  }) }}
          

• # item selected overrides value

  Open this example in a new tab

  {
    "name": "colors",
    "id": "colors",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": "red",
        "text": "Red"
      },
      {
        "value": "green",
        "text": "Green",
        "selected": false
      },
      {
        "value": "blue",
        "text": "Blue"
      }
    ],
    "value": "green"
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "name": "colors",
    "id": "colors",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": "red",
        "text": "Red"
      },
      {
        "value": "green",
        "text": "Green",
        "selected": false
      },
      {
        "value": "blue",
        "text": "Blue"
      }
    ],
    "value": "green"
  }) }}
          

• # id

  Open this example in a new tab

  {
    "id": "select-id",
    "name": "test-name",
    "label": {
      "text": "Horse with no name"
    },
    "items": []
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "select-id",
    "name": "test-name",
    "label": {
      "text": "Horse with no name"
    },
    "items": []
  }) }}
          

• # with selected value

  Open this example in a new tab

  {
    "id": "select-1",
    "name": "select-1",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3",
        "disabled": true
      }
    ],
    "value": 2
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "select-1",
    "name": "select-1",
    "label": {
      "text": "Label text goes here"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2"
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3",
        "disabled": true
      }
    ],
    "value": 2
  }) }}
          

• # with optional form-group classes

  Open this example in a new tab

  {
    "id": "select-1",
    "name": "select-1",
    "classes": "govuk-!-width-full",
    "label": {
      "text": "Label text goes here"
    },
    "formGroup": {
      "classes": "extra-class"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2",
        "selected": true
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3",
        "disabled": true
      }
    ]
  }

  
  {% from "govuk/components/select/macro.njk" import govukSelect %}
  
  {{ govukSelect({
    "id": "select-1",
    "name": "select-1",
    "classes": "govuk-!-width-full",
    "label": {
      "text": "Label text goes here"
    },
    "formGroup": {
      "classes": "extra-class"
    },
    "items": [
      {
        "value": 1,
        "text": "GOV.UK frontend option 1"
      },
      {
        "value": 2,
        "text": "GOV.UK frontend option 2",
        "selected": true
      },
      {
        "value": 3,
        "text": "GOV.UK frontend option 3",
        "disabled": true
      }
    ]
  }) }}