Fieldset
.fieldset은 여러 개의 .field 요소를 하나의 논리적 그룹으로 묶어주는 UI 컨테이너입니다.기본 HTML의
<fieldset> 태그처럼 관련된 입력 항목을 구분하는 역할을 하며,디자인 시스템에 맞는 일관된 레이아웃과 스타일을 적용할 수 있도록 커스텀 클래스로 구현됩니다.
Fieldset
Field
Field
Field Message
.field는 개별 입력 요소(Input, Select 등)와 이에 대한 라벨, 메시지 등을 하나의 블록으로 묶는 구조입니다.
입력 필드에 대한 제목(.field-title), 보조 설명(.field-helper), 오류 메시지(.field-msg .is-error) 등을 포함할 수 있습니다.
| Default | is-error | is-positive | is-persistent |
|---|---|---|---|
|
도움말 메시지가 노출됩니다. |
오류 문구가 노출됩니다. 도움말 메시지가 노출됩니다. |
성공 문구가 노출됩니다. 도움말 메시지가 노출됩니다. |
오류 문구가 노출됩니다. 파일 크기: 파일당 최대 20MB(총 업로드 가능 용량 최대 100MB 제한) |
<div class="field">
<div class="input is-error">
<input type="text">
</div>
<p class="field-msg is-error">오류 문구가 노출됩니다.</p>
<p class="field-msg is-positive">성공 문구가 노출됩니다.</p>
<!-- 이건 사라짐 -->
<p class="field-helper">입력 조건을 참고해 주세요.</p>
<!-- 이건 그대로 보임 -->
<p class="field-helper is-persistent">항상 보여야 하는 안내 문구</p>
</div>