Combo Box: Test

<div class="padding-2">
    <form class="usa-form padding-x-2 padding-bottom-2 padding-top-1px bg-base-lightest radius-md">
        <label class="usa-label" for="fruit">Default combo box in a usa-form</label>
        <div class="usa-combo-box">
            <select class="usa-select" name="fruit" id="fruit">
                <option value>Select a fruit</option>
                <option value="apple">Apple</option>
                <option value="apricot">Apricot</option>
                <option value="avocado">Avocado</option>
                <option value="banana">Banana</option>
                <option value="blackberry">Blackberry</option>
                <option value="blood orange">Blood orange</option>
                <option value="blueberry">Blueberry</option>
                <option value="boysenberry">Boysenberry</option>
                <option value="breadfruit">Breadfruit</option>
                <option value="buddhas hand citron">Buddha's hand citron</option>
                <option value="cantaloupe">Cantaloupe</option>
                <option value="clementine">Clementine</option>
                <option value="crab apple">Crab apple</option>
                <option value="currant">Currant</option>
                <option value="cherry">Cherry</option>
                <option value="custard apple">Custard apple</option>
                <option value="coconut">Coconut</option>
                <option value="cranberry">Cranberry</option>
                <option value="date">Date</option>
                <option value="dragonfruit">Dragonfruit</option>
                <option value="durian">Durian</option>
                <option value="elderberry">Elderberry</option>
                <option value="fig">Fig</option>
                <option value="gooseberry">Gooseberry</option>
                <option value="grape">Grape</option>
                <option value="grapefruit">Grapefruit</option>
                <option value="guava">Guava</option>
                <option value="honeydew melon">Honeydew melon</option>
                <option value="jackfruit">Jackfruit</option>
                <option value="kiwifruit">Kiwifruit</option>
                <option value="kumquat">Kumquat</option>
                <option value="lemon">Lemon</option>
                <option value="lime">Lime</option>
                <option value="lychee">Lychee</option>
                <option value="mandarine">Mandarine</option>
                <option value="mango">Mango</option>
                <option value="mangosteen">Mangosteen</option>
                <option value="marionberry">Marionberry</option>
                <option value="nectarine">Nectarine</option>
                <option value="orange">Orange</option>
                <option value="papaya">Papaya</option>
                <option value="passionfruit">Passionfruit</option>
                <option value="peach">Peach</option>
                <option value="pear">Pear</option>
                <option value="persimmon">Persimmon</option>
                <option value="plantain">Plantain</option>
                <option value="plum">Plum</option>
                <option value="pineapple">Pineapple</option>
                <option value="pluot">Pluot</option>
                <option value="pomegranate">Pomegranate</option>
                <option value="pomelo">Pomelo</option>
                <option value="quince">Quince</option>
                <option value="raspberry">Raspberry</option>
                <option value="rambutan">Rambutan</option>
                <option value="soursop">Soursop</option>
                <option value="starfruit">Starfruit</option>
                <option value="strawberry">Strawberry</option>
                <option value="tamarind">Tamarind</option>
                <option value="tangelo">Tangelo</option>
                <option value="tangerine">Tangerine</option>
                <option value="ugli fruit">Ugli fruit</option>
                <option value="watermelon">Watermelon</option>
                <option value="white currant">White currant</option>
                <option value="yuzu">Yuzu</option>
            </select>
        </div>

        <label class="usa-label" for="moar-fruit">Override combo box with utilities</label>
        <div class="usa-combo-box width-tablet maxw-none">
            <select class="usa-select" name="moar-fruit" id="moar-fruit">
                <option value>Select a fruit</option>
                <option value="apple">Apple</option>
                <option value="apricot">Apricot</option>
                <option value="avocado">Avocado</option>
                <option value="banana">Banana</option>
                <option value="blackberry">Blackberry</option>
                <option value="blood orange">Blood orange</option>
                <option value="blueberry">Blueberry</option>
                <option value="boysenberry">Boysenberry</option>
                <option value="breadfruit">Breadfruit</option>
                <option value="buddhas hand citron">Buddha's hand citron</option>
                <option value="cantaloupe">Cantaloupe</option>
                <option value="clementine">Clementine</option>
                <option value="crab apple">Crab apple</option>
                <option value="currant">Currant</option>
                <option value="cherry">Cherry</option>
                <option value="custard apple">Custard apple</option>
                <option value="coconut">Coconut</option>
                <option value="cranberry">Cranberry</option>
                <option value="date">Date</option>
                <option value="dragonfruit">Dragonfruit</option>
                <option value="durian">Durian</option>
                <option value="elderberry">Elderberry</option>
                <option value="fig">Fig</option>
                <option value="gooseberry">Gooseberry</option>
                <option value="grape">Grape</option>
                <option value="grapefruit">Grapefruit</option>
                <option value="guava">Guava</option>
                <option value="honeydew melon">Honeydew melon</option>
                <option value="jackfruit">Jackfruit</option>
                <option value="kiwifruit">Kiwifruit</option>
                <option value="kumquat">Kumquat</option>
                <option value="lemon">Lemon</option>
                <option value="lime">Lime</option>
                <option value="lychee">Lychee</option>
                <option value="mandarine">Mandarine</option>
                <option value="mango">Mango</option>
                <option value="mangosteen">Mangosteen</option>
                <option value="marionberry">Marionberry</option>
                <option value="nectarine">Nectarine</option>
                <option value="orange">Orange</option>
                <option value="papaya">Papaya</option>
                <option value="passionfruit">Passionfruit</option>
                <option value="peach">Peach</option>
                <option value="pear">Pear</option>
                <option value="persimmon">Persimmon</option>
                <option value="plantain">Plantain</option>
                <option value="plum">Plum</option>
                <option value="pineapple">Pineapple</option>
                <option value="pluot">Pluot</option>
                <option value="pomegranate">Pomegranate</option>
                <option value="pomelo">Pomelo</option>
                <option value="quince">Quince</option>
                <option value="raspberry">Raspberry</option>
                <option value="rambutan">Rambutan</option>
                <option value="soursop">Soursop</option>
                <option value="starfruit">Starfruit</option>
                <option value="strawberry">Strawberry</option>
                <option value="tamarind">Tamarind</option>
                <option value="tangelo">Tangelo</option>
                <option value="tangerine">Tangerine</option>
                <option value="ugli fruit">Ugli fruit</option>
                <option value="watermelon">Watermelon</option>
                <option value="white currant">White currant</option>
                <option value="yuzu">Yuzu</option>
            </select>
        </div>

    </form>
    <label class="usa-label" for="even-moar-fruit">Not in a usa-form element</label>
    <div class="usa-combo-box">
        <select class="usa-select" name="even-moar-fruit" id="even-moar-fruit">
            <option value>Select a fruit</option>
            <option value="apple">Apple</option>
            <option value="apricot">Apricot</option>
            <option value="avocado">Avocado</option>
            <option value="banana">Banana</option>
            <option value="blackberry">Blackberry</option>
            <option value="blood orange">Blood orange</option>
            <option value="blueberry">Blueberry</option>
            <option value="boysenberry">Boysenberry</option>
            <option value="breadfruit">Breadfruit</option>
            <option value="buddhas hand citron">Buddha's hand citron</option>
            <option value="cantaloupe">Cantaloupe</option>
            <option value="clementine">Clementine</option>
            <option value="crab apple">Crab apple</option>
            <option value="currant">Currant</option>
            <option value="cherry">Cherry</option>
            <option value="custard apple">Custard apple</option>
            <option value="coconut">Coconut</option>
            <option value="cranberry">Cranberry</option>
            <option value="date">Date</option>
            <option value="dragonfruit">Dragonfruit</option>
            <option value="durian">Durian</option>
            <option value="elderberry">Elderberry</option>
            <option value="fig">Fig</option>
            <option value="gooseberry">Gooseberry</option>
            <option value="grape">Grape</option>
            <option value="grapefruit">Grapefruit</option>
            <option value="guava">Guava</option>
            <option value="honeydew melon">Honeydew melon</option>
            <option value="jackfruit">Jackfruit</option>
            <option value="kiwifruit">Kiwifruit</option>
            <option value="kumquat">Kumquat</option>
            <option value="lemon">Lemon</option>
            <option value="lime">Lime</option>
            <option value="lychee">Lychee</option>
            <option value="mandarine">Mandarine</option>
            <option value="mango">Mango</option>
            <option value="mangosteen">Mangosteen</option>
            <option value="marionberry">Marionberry</option>
            <option value="nectarine">Nectarine</option>
            <option value="orange">Orange</option>
            <option value="papaya">Papaya</option>
            <option value="passionfruit">Passionfruit</option>
            <option value="peach">Peach</option>
            <option value="pear">Pear</option>
            <option value="persimmon">Persimmon</option>
            <option value="plantain">Plantain</option>
            <option value="plum">Plum</option>
            <option value="pineapple">Pineapple</option>
            <option value="pluot">Pluot</option>
            <option value="pomegranate">Pomegranate</option>
            <option value="pomelo">Pomelo</option>
            <option value="quince">Quince</option>
            <option value="raspberry">Raspberry</option>
            <option value="rambutan">Rambutan</option>
            <option value="soursop">Soursop</option>
            <option value="starfruit">Starfruit</option>
            <option value="strawberry">Strawberry</option>
            <option value="tamarind">Tamarind</option>
            <option value="tangelo">Tangelo</option>
            <option value="tangerine">Tangerine</option>
            <option value="ugli fruit">Ugli fruit</option>
            <option value="watermelon">Watermelon</option>
            <option value="white currant">White currant</option>
            <option value="yuzu">Yuzu</option>
        </select>
    </div>

    <label class="usa-label" for="even-moar-moar-fruit">Not in a usa-form element, custom width utilities</label>
    <div class="usa-combo-box width-full maxw-none">
        <select class="usa-select" name="even-moar-moar-fruit" id="even-moar-moar-fruit">
            <option value>Select a fruit</option>
            <option value="apple">Apple</option>
            <option value="apricot">Apricot</option>
            <option value="avocado">Avocado</option>
            <option value="banana">Banana</option>
            <option value="blackberry">Blackberry</option>
            <option value="blood orange">Blood orange</option>
            <option value="blueberry">Blueberry</option>
            <option value="boysenberry">Boysenberry</option>
            <option value="breadfruit">Breadfruit</option>
            <option value="buddhas hand citron">Buddha's hand citron</option>
            <option value="cantaloupe">Cantaloupe</option>
            <option value="clementine">Clementine</option>
            <option value="crab apple">Crab apple</option>
            <option value="currant">Currant</option>
            <option value="cherry">Cherry</option>
            <option value="custard apple">Custard apple</option>
            <option value="coconut">Coconut</option>
            <option value="cranberry">Cranberry</option>
            <option value="date">Date</option>
            <option value="dragonfruit">Dragonfruit</option>
            <option value="durian">Durian</option>
            <option value="elderberry">Elderberry</option>
            <option value="fig">Fig</option>
            <option value="gooseberry">Gooseberry</option>
            <option value="grape">Grape</option>
            <option value="grapefruit">Grapefruit</option>
            <option value="guava">Guava</option>
            <option value="honeydew melon">Honeydew melon</option>
            <option value="jackfruit">Jackfruit</option>
            <option value="kiwifruit">Kiwifruit</option>
            <option value="kumquat">Kumquat</option>
            <option value="lemon">Lemon</option>
            <option value="lime">Lime</option>
            <option value="lychee">Lychee</option>
            <option value="mandarine">Mandarine</option>
            <option value="mango">Mango</option>
            <option value="mangosteen">Mangosteen</option>
            <option value="marionberry">Marionberry</option>
            <option value="nectarine">Nectarine</option>
            <option value="orange">Orange</option>
            <option value="papaya">Papaya</option>
            <option value="passionfruit">Passionfruit</option>
            <option value="peach">Peach</option>
            <option value="pear">Pear</option>
            <option value="persimmon">Persimmon</option>
            <option value="plantain">Plantain</option>
            <option value="plum">Plum</option>
            <option value="pineapple">Pineapple</option>
            <option value="pluot">Pluot</option>
            <option value="pomegranate">Pomegranate</option>
            <option value="pomelo">Pomelo</option>
            <option value="quince">Quince</option>
            <option value="raspberry">Raspberry</option>
            <option value="rambutan">Rambutan</option>
            <option value="soursop">Soursop</option>
            <option value="starfruit">Starfruit</option>
            <option value="strawberry">Strawberry</option>
            <option value="tamarind">Tamarind</option>
            <option value="tangelo">Tangelo</option>
            <option value="tangerine">Tangerine</option>
            <option value="ugli fruit">Ugli fruit</option>
            <option value="watermelon">Watermelon</option>
            <option value="white currant">White currant</option>
            <option value="yuzu">Yuzu</option>
        </select>
    </div>

</div>