Input

Text input fields with consistent styling and focus handling.

기본

<div class="ga-input">
    <input type="text" placeholder="입력하세요" />
</div>

Disabled

<div class="ga-input disabled">
    <input type="text" placeholder="입력하세요" />
</div>

Read only

<div class="ga-input disabled">
    <input type="text" placeholder="입력하세요" />
</div>

Underline

<div class="ga-input underline">
    <input type="text" placeholder="입력하세요" />
</div>

Transparent

<div class="ga-input transparent">
    <input type="text" placeholder="입력하세요" />
</div>

Compact

<div class="ga-input compact">
    <input type="text" placeholder="입력하세요" />
</div>

Edit

<div class="ga-input edit">
    <input type="text" placeholder="입력하세요" />
    <button class="ga-button icon edit-btn">
        <i class="fa fa-pen"></i>
    </button>
</div>

Status

<div class="ga-input { STATUS }">
    <input type="text" placeholder="입력하세요" />
</div>

Fluid

<div class="ga-input fluid">
    <input type="text" placeholder="입력하세요" />
</div>

Unit

<div class="ga-input unit" data-unit="{ unit text }">
    <input type="text" placeholder="입력하세요" />
</div>

Icon

Left

Right

Both

<!-- Left -->
<div class="ga-input icon left">
    <input type="text" placeholder="입력하세요" />
    <i class="fa fa-icon"></i>
</div>
<!-- Right + Icon link 연결 --> 
<div class="ga-input icon right link">
    <input type="text" placeholder="입력하세요" />
    <i class="fa fa-icon"></i>
</div>
<!-- Both -->
<div class="ga-input icon both">
    <i class="fa fa-icon"></i>
    <input type="text" placeholder="입력하세요" />
    <i class="fa fa-icon"></i>
</div>

Badge

<div class="ga-input badge">
    <input type="text" placeholder="입력하세요" />
    <span class="ga-badge">B</span>
</div>

Label

원

0/30

Name

<!-- Left -->
<div class="ga-input labeled left">
    <input type="text" placeholder="입력하세요" />
    <label>Label Text</label>
</div>
<!-- Right -->
<div class="ga-input labeled right">
    <input type="text" placeholder="입력하세요" />
    <label>Label Text</label>
</div>

Button

저장

<!-- Left -->
<div class="ga-input button left">
    <input type="text" placeholder="입력하세요" />
    <button class="ga-button">Button Text</button>
</div>
<!-- Right -->
<div class="ga-input button right">
    <input type="text" placeholder="입력하세요" />
    <button class="ga-button">Button Text</button>
</div>

Textarea

<div class="ga-input">
    <textarea placeholder="입력하세요" />
</div>
<div class="ga-input short">
    <textarea placeholder="입력하세요" />
</div>