1. Component Guide
  2. Option select
  3. Default
Option select example

Default

How it looks (preview)

Market sector

Market sector

How to call this example

<%= render "govuk_publishing_components/components/option_select", {
  key: "market_sector",
  title: "Market sector",
  options_container_id: "list_of_sectors",
  options: [
    {
      value: "aerospace",
      label: "Aerospace",
      id: "aerospace"
    },
    {
      value: "agriculture-environment-and-natural-resources",
      label: "Agriculture, environment and natural resources",
      id: "agriculture-environment-and-natural-resources"
    },
    {
      value: "building-and-construction",
      label: "Building and construction",
      id: "building-and-construction"
    },
    {
      value: "chemicals",
      label: "Chemicals",
      id: "chemicals"
    },
    {
      value: "clothing-footwear-and-fashion",
      label: "Clothing, footwear and fashion",
      id: "clothing-footwear-and-fashion"
    },
    {
      value: "defence",
      label: "Defence",
      id: "defence"
    },
    {
      value: "distribution-and-service-industries",
      label: "Distribution and Service Industries",
      id: "distribution-and-service-industries"
    },
    {
      value: "electronics-industry",
      label: "Electronics Industry",
      id: "electronics-industry"
    },
    {
      value: "energy",
      label: "Energy",
      id: "energy"
    },
    {
      value: "engineering",
      label: "Engineering",
      id: "engineering"
    },
    {
      value: "financial-services",
      label: "Financial services",
      id: "financial-services"
    },
    {
      value: "fire-police-and-security",
      label: "Fire, police, and security",
      id: "fire-police-and-security"
    },
    {
      value: "food-manufacturing",
      label: "Food manufacturing",
      id: "food-manufacturing"
    },
    {
      value: "giftware-jewellery-and-tableware",
      label: "Giftware, jewellery and tableware",
      id: "giftware-jewellery-and-tableware"
    }
  ]
} %>