Overviews
  • welcome
  • FAQs
  • components
    • Bases
  • typography
  • colors
    • Elements
  • button
  • input
  • tag
  • checkbox
  • switch
  • badge
  • list
  • selectbox
  • message
  • tabs
  • cards
  • segments
  • table
  • pagination
  • panel
  • calendar
    • Layouts
  • form
  • grid
  • grid2
    • Modules
  • modal
  • toast

    • Input

    일관된 스타일과 포커스 처리를 제공하는 텍스트 입력 필드.

    기본

    <div class="ga-input">
    <input type="text" placeholder="Insert text" />
</div>

    With Label

    <div class="ga-input">
    <!-- label system -->
    <input type="text" placeholder=" " />
    <label>Title</label>
</div>

    Disabled

    <div class="ga-input disabled">
    <input type="text" placeholder="Insert text" />
</div>

    Read only

    <div class="ga-input disabled">
    <input type="text" placeholder="Insert text" />
</div>

    Underline

    <div class="ga-input underline">
    <input type="text" placeholder="Insert text" />
</div>

    Transparent

    <div class="ga-input transparent">
    <input type="text" placeholder="Insert text" />
</div>

    Compact

    <div class="ga-input compact">
    <input type="text" placeholder="Insert text" />
</div>

    Edit

    <div class="ga-input edit">
    <input type="text" placeholder="Insert text" />
    <button class="ga-button icon edit-btn">
        <i class="xi-pen"></i>
    </button>
</div>

    Status

    <div class="ga-input { STATUS }">
    <input type="text" placeholder="Insert text" />
</div>

    Fluid

    <div class="ga-input fluid">
    <input type="text" placeholder="Insert text" />
</div>

    Unit

    <div class="ga-input unit" data-unit="{ unit text }">
    <input type="text" placeholder="Insert text" />
</div>

    Icon

    Left
    Right
    Both
    <!-- Left -->
<div class="ga-input icon left">
    <input type="text" placeholder="Insert text" />
    <i class="xi-icon"></i>
</div>
<!-- Right + Icon link 연결 --> 
<div class="ga-input icon right link">
    <input type="text" placeholder="Insert text" />
    <i class="xi-icon"></i>
</div>
<!-- Both -->
<div class="ga-input icon both">
    <i class="xi-icon"></i>
    <input type="text" placeholder="Insert text" />
    <i class="xi-icon"></i>
</div>

    Badge

    30
    <div class="ga-input badge">
    <input type="text" placeholder="Insert text" />
    <span class="ga-badge">B</span>
</div>

    Label

    원
    0/30
    Name
    <!-- Left -->
<div class="ga-input labeled left">
    <input type="text" placeholder="Insert text" />
    <label>Label Text</label>
</div>
<!-- Right -->
<div class="ga-input labeled right">
    <input type="text" placeholder="Insert text" />
    <label>Label Text</label>
</div>

    Button

    저장
    <!-- Left -->
<div class="ga-input button left">
    <input type="text" placeholder="Insert text" />
    <button class="ga-button">Button Text</button>
</div>
<!-- Right -->
<div class="ga-input button right">
    <input type="text" placeholder="Insert text" />
    <button class="ga-button">Button Text</button>
</div>

    Textarea

    <div class="ga-input">
    <textarea placeholder="Insert text" />
</div>
<div class="ga-input short">
    <textarea placeholder="Insert text`" />
</div>