Form
Import
<link rel="stylesheet" href="/guide/css/base/index.css" /> <link rel="stylesheet" href="/guide/css/components/form.css" />
Input
Default
HelperText
Hover
HelperText
Focus
HelperText
Disabled
HelperText
Error
Error message
Success
Success message
Textarea
Default
HelperText
Hover
HelperText
Focus
HelperText
Disabled
HelperText
Error
Error message
Success
Success message
Checkbox
Default
Hover
Focus
Checked
Disabled
Radio
Default
Hover
Focus
Checked
Disabled
Select
Default
Hover
Selected
Disabled
Components
Label
HelperText
HelperText
Error message
Success message
Checkbox & Radio
Specs
| 요소 | Height | Size / Width | Padding | Font | Border Radius |
|---|---|---|---|---|---|
| Label | — | — | — | 18px / Regular (--font-size-body-base) | — |
| Input | 40px | min 280px | 8px 16px | 16px / Regular (--font-size-body-sm) | 8px (--radius-md) |
| Textarea | min 100px | 100% | 8px (--spacing-2) | 16px / Regular (--font-size-body-sm) | 8px (--radius-md) |
| Checkbox | — | 20×20px | — | 16px / Regular (--font-size-body-sm) | 4px (--radius-sm) |
| Radio | — | 20×20px | — | 16px / Regular (--font-size-body-sm) | 50% |
| Select | 40px | 100% | 8px 16px | 18px / Regular (--font-size-body-base) | 8px (--radius-md) |
| HelperText | — | — | — | 16px / Regular (--font-size-body-sm) | — |
Code
Input
<div class="form-group">
<label class="label" for="my-input">
Label <span class="label__required">*</span>
</label>
<input class="input" type="text" id="my-input" placeholder="Placeholder" />
<span class="helper-text">HelperText</span>
</div>
<!-- 상태 수정자: input--error / input--success -->
<!-- helper-text 수정자: helper-text--error / helper-text--success -->
Checkbox & Radio
<div class="checkbox">
<input class="checkbox__input" type="checkbox" id="my-checkbox" />
<label class="checkbox__label" for="my-checkbox">
<span class="checkbox__control"></span>
Label Text
</label>
</div>
<div class="radio">
<input class="radio__input" type="radio" id="my-radio" name="group" />
<label class="radio__label" for="my-radio">
<span class="radio__control"></span>
Label Text
</label>
</div>
Select
<div class="select-wrap">
<select class="select">
<option value="">Select Option</option>
<option value="1">Menu Item 1</option>
<option value="2">Menu Item 2</option>
</select>
</div>
<!-- 값 선택된 상태: select--selected -->
Classes
| 클래스 | 타입 | 설명 |
|---|---|---|
| .form-group | 루트 | Label + Input + HelperText 묶음 |
| .label | 요소 | 라벨 텍스트 (18px) |
| .label__required | 요소 | 필수 항목 표시 (*) |
| .input | 요소 | 텍스트 인풋 (height 40px) |
| .input--error | 수정자 | 에러 상태 — 빨간 보더 |
| .input--success | 수정자 | 성공 상태 — 초록 보더 |
| .textarea | 요소 | 텍스트에어리어 (min-height 100px) |
| .textarea--error | 수정자 | 에러 상태 |
| .textarea--success | 수정자 | 성공 상태 |
| .helper-text | 요소 | 도움말 텍스트 (16px) |
| .helper-text--error | 수정자 | 에러 메시지 — 빨간 텍스트 |
| .helper-text--success | 수정자 | 성공 메시지 — 초록 텍스트 |
| .checkbox | 루트 | 체크박스 <div> 래퍼. 포커스 시 빨간 테두리 표시 |
| .checkbox__input | 요소 | 네이티브 input[type=checkbox]. id 필수 |
| .checkbox__label | 요소 | 체크박스 <label>. for로 input과 연결 |
| .radio | 루트 | 라디오 <div> 래퍼. 포커스 시 빨간 테두리 표시 |
| .radio__input | 요소 | 네이티브 input[type=radio]. id 필수 |
| .radio__label | 요소 | 라디오 <label>. for로 input과 연결 |
| .select-wrap | 루트 | Select 드롭다운 화살표 래퍼 |
| .select | 요소 | 셀렉트 박스 (height 40px) |
| .select--selected | 수정자 | 값이 선택된 상태 (텍스트 색 변경) |