CSS: form-field-messages ​

.instui-form-field-messages — 필드 도움말 및 유효성 검사 메시지 — 힌트, 오류, 성공, 화면 리더 전용 — 오류와 성공 시 글리프 포함.

중첩된 메시지 사이에 자체 gap 를 설정합니다; -gap-* 간격 유틸리티 모디파이어를 연쇄하면 해당 내장 값을 재정의합니다.

Source: form-field-messages.css

접근성 ​

-type-screenreader-only 메시지는 시각적으로 숨겨지지만 접근성 트리에는 남아 있어 여전히 안내됩니다; 오류 및 성공 메시지는 aria-describedby로 필드와 연결하여 보조 기술이 해당 제어와 함께 읽을 수 있도록 하세요.

사용법 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/form-field-messages.css";

예제들 ​

html
<div class="instui-form-field-messages">
  <span class="instui-form-field-message -type-hint">We'll never share it.</span>
  <span class="instui-form-field-message -type-error">Enter a valid email address.</span>
</div>

구조 ​

text
.instui-form-field-messages
  .instui-form-field-message
flowchart TD n0[".instui-form-field-messages"]:::cssdoc-root n1(".instui-form-field-message"):::cssdoc-part n0 --> n1 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

수정자 ​

수정자설명
.-type-new-errorAlias — maps to .-type-error.

부분 ​

부분설명
.instui-form-field-message개별 메시지; 해당 -type-* 는 힌트, 오류, 성공 또는 화면 리더 전용 변형을 선택합니다.

의사 요소 ​

의사 요소설명
::before오류 및 성공 메시지에 선행 상태 글리프를 렌더링합니다: 오류에는 경고 원(alert circle), 성공에는 체크 원(check circle)을 사용합니다.

사용된 토큰 ​

Token타입값
--instui-component-form-field-layout-gap-primitives<length>0.5rem
--instui-component-form-field-message-error-text-color<color>LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-form-field-message-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-form-field-message-font-size<length>0.875rem
--instui-component-form-field-message-font-weight<integer>400
--instui-component-form-field-message-hint-text-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-form-field-message-line-height<length>1.25rem
--instui-component-form-field-message-success-text-color<color>LightDarklight-dark(#037D37, #61C378)
--instui-icon-circle-alert<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%228%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212.01%22%20y1%3D%2216%22%20y2%3D%2216%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-circle-check<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E')

관련 항목 ​

  • form-field — 레이블, 컨트롤 및 이러한 메시지를 래핑합니다.