<< Go back

Input group - select



Before control
£

<div>
    <label for="select-1" class="block ml-6">Amount (GBP)</label>
    <span class="px-1">£</span>
    <select
        id="select-1"
        name="select-1"
        class="border rounded px-2 py-1 bg-white
            focus:outline-none focus:ring-2 focus:ring-blue-500"
    >
        <option value="">Select an option</option>
        <option value="1">10</option>
        <option value="2">20</option>
        <option value="3">30</option>
    </select>
</div>


After control
000

<div>
    <label for="select-2" class="block">Amount (thousands)</label>
    <select
        id="select-2"
        name="select-2"
        class="border rounded px-2 py-1 bg-white
            focus:outline-none focus:ring-2 focus:ring-blue-500"
    >
        <option value="">Select an option</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <span class="px-2">000</span>
</div>


Both before & after control
£ 000

<div>
    <label for="select-3" class="block ml-6">Amount (GBP in thousands)</label>
    <span class="px-1">£</span>
    <select
        id="select-3"
        name="select-3"
        class="border rounded px-2 py-1 bg-white
            focus:outline-none focus:ring-2 focus:ring-blue-500"
    >
        <option value="">Select an option</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <span class="px-2">000</span>
</div>