텍스트·아이콘 부가 입력

미리보기

소스

<div class="mb-3">
    <label class="form-label">앞에 텍스트가 붙는 입력</label>
    <div class="input-group input-group-flat">
        <span class="input-group-text">
            https://tabler.io/users/
        </span>
        <input type="text" class="form-control ps-0" value="yourfancyusername" autocomplete="off">
    </div>
</div>

<div class="mb-3">
    <label class="form-label">뒤에 텍스트가 붙는 입력</label>
    <div class="input-group input-group-flat">
        <input type="text" class="form-control text-end pe-0" value="yourfancydomain" autocomplete="off">
        <span class="input-group-text">
            .tabler.io
        </span>
    </div>
</div>

<div class="mb-3">
    <label class="form-label">뒤에 링크가 붙는 입력</label>
    <div class="input-group input-group-flat">
        <input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off">
        <span class="input-group-text">
            <a href="#" class="input-group-link">비밀번호 보기</a>
        </span>
    </div>
</div>

<div class="mb-3">
    <label class="form-label">뒤에 키보드 입력이 붙는 입력</label>
    <div class="input-group input-group-flat">
        <input type="text" class="form-control" autocomplete="off">
        <span class="input-group-text">
            <kbd>ctrl + K</kbd>
        </span>
    </div>
</div>

<div class="mb-3">
    <label class="form-label">뒤에 아이콘 링크가 붙는 입력</label>
    <div class="input-group input-group-flat">
        <input type="text" class="form-control" autocomplete="off">
        <span class="input-group-text">
            <a href="#" class="link-secondary" data-bs-toggle="tooltip" aria-label="검색 지우기" data-bs-original-title="검색 지우기">
                <i class="f:20 ti ti-x"></i>
            </a>
            <a href="#" class="link-secondary ms-2" data-bs-toggle="tooltip" aria-label="검색 설정" data-bs-original-title="검색 설정">
                <i class="f:20 ti ti-adjustments"></i>
            </a>
            <a href="#" class="link-secondary ms-2 disabled" data-bs-toggle="tooltip" aria-label="알림 추가" data-bs-original-title="알림 추가">
                <i class="f:20 ti ti-bell"></i>
            </a>
        </span>
    </div>
</div>