SDC Pattern Library

Select: Select (wide, optional)

Select wide uses the input--block class to produce a 100% width variant.

<div class="field field--select">
    <label class="label venus " for="select-wide-optional">
      Select your favourite cartoon character
      <br/>
      <span class="label__description pluto">As the initial option is selected but not disabled this is an optional field (once a selection has been made it is possible to select no option.)</span>
  </label>
    <select class="input input--select input--block" id="select-wide-optional" name="select">
      <option selected>Select an option</option>
      <option value="bart">Bart Simpson</option>
      <option value="homer">Homer Simpson</option>
      <option value="marge">Marge Simpson</option>
      <option value="lisa">Lisa Simpson</option>
      <option value="ned">Ned Flanders</option>
      <option value="bugs">Bugs Bunny</option>
      <option value="7 Dwarves">The 7 Dwarves: Grumpy, Happy, Sleepy, Bashful, Sneezy, Dopey &amp; Doc</option>
      <option value="charlie brown">Charlie Brown</option>
      <option value="snoopy">Snoopy</option>
  </select>
</div>
 
{
  "label": "Select (wide)",
  "label_text": "Select your favourite cartoon character",
  "label_for": "select-wide-optional",
  "label_description": "As the initial option is selected but not disabled this is an optional field (once a selection has been made it is possible to select no option.)",
  "select_classes": " input--block",
  "options": [
    {
      "option_text": "Select an option",
      "option_value": null,
      "selected": "selected",
      "disabled": null
    },
    {
      "option_text": "Bart Simpson",
      "option_value": "bart"
    },
    {
      "option_text": "Homer Simpson",
      "option_value": "homer"
    },
    {
      "option_text": "Marge Simpson",
      "option_value": "marge"
    },
    {
      "option_text": "Lisa Simpson",
      "option_value": "lisa"
    },
    {
      "option_text": "Ned Flanders",
      "option_value": "ned"
    },
    {
      "option_text": "Bugs Bunny",
      "option_value": "bugs"
    },
    {
      "option_text": "The 7 Dwarves: Grumpy, Happy, Sleepy, Bashful, Sneezy, Dopey & Doc",
      "option_value": "7 Dwarves"
    },
    {
      "option_text": "Charlie Brown",
      "option_value": "charlie brown"
    },
    {
      "option_text": "Snoopy",
      "option_value": "snoopy"
    }
  ]
}