گروه ورودی

گروه‌های ورودی
@
@example.com
https://example.com/users/
تومان .00
@
با textarea 
<div class="input-group mb-3">
                                <span class="input-group-text" id="basic-addon1">@</span>
                                <input type="text" class="form-control" placeholder="نام کاربری"
                                    aria-label="نام کاربری" aria-describedby="basic-addon1">
                            </div>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" placeholder="نام کاربری گیرنده"
                                    aria-label="نام کاربری گیرنده" aria-describedby="basic-addon2">
                                <span class="input-group-text" id="basic-addon2">@example.com</span>
                            </div>
                            <label for="basic-url" class="form-label">URL شخصی شما</label>
                            <div class="input-group mb-3">
                                <span class="input-group-text"
                                    id="basic-addon3">https://example.com/users/</span>
                                <input type="text" class="form-control" id="basic-url"
                                    aria-describedby="basic-addon3">
                            </div>
                            <div class="input-group mb-3">
                                <span class="input-group-text">تومان</span>
                                <input type="text" class="form-control"
                                    aria-label="مقدار (به نزدیک‌ترین تومان)">
                                <span class="input-group-text">.00</span>
                            </div>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" placeholder="نام کاربری"
                                    aria-label="نام کاربری">
                                <span class="input-group-text">@</span>
                                <input type="text" class="form-control" placeholder="سرور"
                                    aria-label="سرور">
                            </div>
                            <div class="input-group">
                                <span class="input-group-text">با textarea</span>
                                <textarea class="form-control" aria-label="با textarea"></textarea>
                            </div>
اندازه‌دهی
کوچک
پیش‌فرض
بزرگ 
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">کوچک</span>
<input type="text" class="form-control"
aria-label="مثال ورودی اندازه"
aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-3">
<span class="input-group-text"
id="inputGroup-sizing-default">پیش‌فرض</span>
<input type="text" class="form-control"
aria-label="مثال ورودی اندازه"
aria-describedby="inputGroup-sizing-default">
</div>
 <div class="input-group input-group-lg">
<span class="input-group-text" id="inputGroup-sizing-lg">بزرگ</span>
<input type="text" class="form-control"
aria-label="مثال ورودی اندازه"
 aria-describedby="inputGroup-sizing-lg">
</div>
افزودن دکمه‌ها 
<div class="input-group mb-3">
    <button class="btn btn-primary" type="button"
        id="button-addon1">دکمه</button>
    <input type="text" class="form-control" placeholder=""
        aria-label="ورودی با دکمه"
        aria-describedby="button-addon1">
</div>
<div class="input-group mb-3">
    <button class="btn btn-primary" type="button"
    id="button-addon">دکمه</button>
    <input type="text" class="form-control" placeholder="نام کاربری گیرنده"
        aria-label="نام کاربری گیرنده" aria-describedby="button-addon">
    
</div>
<div class="input-group mb-3">
    <button class="btn btn-primary" type="button">دکمه</button>
    <button class="btn btn-primary" type="button">دکمه</button>
    <input type="text" class="form-control" placeholder=""
        aria-label="ورودی با دو دکمه">
</div>
<div class="input-group">
    <input type="text" class="form-control" placeholder="نام کاربری گیرنده"
        aria-label="نام کاربری گیرنده با دو دکمه">
    <button class="btn btn-primary" type="button">دکمه</button>
    <button class="btn btn-primary" type="button">دکمه</button>
</div>
دکمه‌ها با کشویی‌ها 
<div class="input-group mb-3">
    <button class="btn btn-primary dropdown-toggle" type="button"
        data-bs-toggle="dropdown" aria-expanded="false">کشویی</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
    <input type="text" class="form-control"
        aria-label="ورودی متنی با دکمه کشویی">
</div>
<div class="input-group mb-3">
    <input type="text" class="form-control"
        aria-label="ورودی متنی با دکمه کشویی">
    <button class="btn btn-outline-primary dropdown-toggle" type="button"
        data-bs-toggle="dropdown" aria-expanded="false">کشویی</button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
<div class="input-group">
    <button class="btn btn-primary-transparent dropdown-toggle" type="button"
        data-bs-toggle="dropdown" aria-expanded="false">کشویی</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات قبل</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر قبل</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
    <input type="text" class="form-control"
        aria-label="ورودی متنی با دو دکمه کشویی">
    <button class="btn btn-primary-transparent dropdown-toggle" type="button"
        data-bs-toggle="dropdown" aria-expanded="false">کشویی</button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری اینجا</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
ورودی فایل سفارشی 
<div class="input-group mb-3">
    <label class="input-group-text" for="inputGroupFile01">بارگذاری</label>
    <input type="file" class="form-control" id="inputGroupFile01">
</div>

<div class="input-group mb-3">
    <input type="file" class="form-control" id="inputGroupFile02">
    <label class="input-group-text" for="inputGroupFile02">بارگذاری</label>
</div>

<div class="input-group mb-3">
    <button class="btn btn-primary" type="button"
        id="inputGroupFileAddon03">دکمه</button>
    <input type="file" class="form-control" id="inputGroupFile03"
        aria-describedby="inputGroupFileAddon03" aria-label="بارگذاری">
</div>

<div class="input-group">
    <input type="file" class="form-control" id="inputGroupFile04"
        aria-describedby="inputGroupFileAddon04" aria-label="بارگذاری">
    <button class="btn btn-primary" type="button"
        id="inputGroupFileAddon04">دکمه</button>
</div>
افزودنی‌های متعدد 
<div class="input-group mb-3">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox" value=""
            aria-label="چک‌باکس برای ورودی متن بعدی">
    </div>
    <input type="text" class="form-control"
        aria-label="ورودی متن با چک‌باکس">
</div>
<div class="input-group">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="radio" value=""
            aria-label="دکمه رادیویی برای ورودی متن بعدی">
    </div>
    <input type="text" class="form-control"
        aria-label="ورودی متن با دکمه رادیویی">
</div>
دکمه‌های تقسیم شده 
<div class="input-group mb-3">
    <button type="button" class="btn btn-primary">عملیات</button>
    <button type="button"
        class="btn btn-primary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">باز کردن کشویی</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">چیزی دیگر اینجا</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
    <input type="text" class="form-control"
        aria-label="ورودی متنی با دکمه تقسیم شده کشویی">
</div>
<div class="input-group">
    <input type="text" class="form-control"
        aria-label="ورودی متنی با دکمه تقسیم شده کشویی">
    <button type="button" class="btn btn-primary">عملیات</button>
    <button type="button"
        class="btn btn-primary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">باز کردن کشویی</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">چیزی دیگر اینجا</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a></li>
    </ul>
</div>
ورودی‌های چندگانه
نام و نام خانوادگی 
<div class="input-group">
    <span class="input-group-text">نام و نام خانوادگی</span>
    <input type="text" aria-label="نام" class="form-control">
    <input type="text" aria-label="نام خانوادگی" class="form-control">
</div>
انتخاب سفارشی 
<div class="input-group mb-3">
    <label class="input-group-text" for="inputGroupSelect01">گزینه‌ها</label>
    <select class="form-select" id="inputGroupSelect01">
        <option selected>انتخاب کنید...</option>
        <option value="1">یک</option>
        <option value="2">دو</option>
        <option value="3">سه</option>
    </select>
</div>
<div class="input-group mb-3">
    <select class="form-select" id="inputGroupSelect02">
        <option selected>انتخاب کنید...</option>
        <option value="1">یک</option>
        <option value="2">دو</option>
        <option value="3">سه</option>
    </select>
    <label class="input-group-text" for="inputGroupSelect02">گزینه‌ها</label>
</div>
<div class="input-group mb-3">
    <button class="btn btn-primary" type="button">دکمه</button>
    <select class="form-select" id="inputGroupSelect03"
        aria-label="مثال انتخاب با افزونه دکمه">
        <option selected>انتخاب کنید...</option>
        <option value="1">یک</option>
        <option value="2">دو</option>
        <option value="3">سه</option>
    </select>
</div>
<div class="input-group">
    <select class="form-select" id="inputGroupSelect04"
        aria-label="مثال انتخاب با افزونه دکمه">
        <option selected>انتخاب کنید...</option>
        <option value="1">یک</option>
        <option value="2">دو</option>
        <option value="3">سه</option>
    </select>
    <button class="btn btn-primary" type="button">دکمه</button>
</div>
چک‌باکس‌ها و دکمه‌های رادیویی 
<div class="input-group mb-3">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox" value=""
            aria-label="چک‌باکس برای ورودی متن بعدی">
    </div>
    <input type="text" class="form-control"
        aria-label="ورودی متن با چک‌باکس">
</div>
<div class="input-group">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="radio" value=""
            aria-label="دکمه رادیویی برای ورودی متن بعدی">
    </div>
    <input type="text" class="form-control"
        aria-label="ورودی متن با دکمه رادیویی">
</div>
پیچیدن (Wrapping)
@ 
<div class="input-group flex-nowrap">
    <span class="input-group-text" id="addon-wrapping">@</span>
    <input type="text" class="form-control" placeholder="نام کاربری"
        aria-label="نام کاربری" aria-describedby="addon-wrapping">
</div>