<< Go back

Input group - input



Before control
£

<div>
    <label for="input-1" class="block ml-6">Amount (GBP)</label>
    <span class="px-1">£</span>
    <input 
        id="input-1"
        type="number"
        placeholder="Amount (GBP)"
        class="border rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
</div>


After control
000

<div>
    <label for="input-2" class="block">Amount (thousands)</label>
    <input 
        id="input-2"
        type="number"
        placeholder="Amount (thousands)"
        class="border rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
    <span>000</span>
</div>


Both before & after control
£ 000

<div>
    <label for="input-3" class="block ml-6">Amount (GBP in thousands)</label>
    <span class="px-1">£</span>
    <input 
        id="input-3"
        type="number"
        placeholder="(GBP in thousands)"
        class="border rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
    <span>000</span>
</div>