03 · Components · 도움
도움말 텍스트Help Text
폼 필드 하단에 배치해 입력 규칙·형식·오류 사유를 알려주는 작은 텍스트. aria-describedby로 연결해 스크린리더 사용자에게도 동일한 정보를 전달합니다.
StableWCAG AA
기본 안내
tsx
<label htmlFor="pw">비밀번호</label>
<Input id="pw" type="password" aria-describedby="pw-hint" />
<HelpText id="pw-hint">8자 이상, 특수문자 하나 이상 포함.</HelpText>미리보기
8자 이상, 특수문자 하나 이상 포함.
오류 사유
tsx
<Input invalid aria-describedby="email-err" />
<HelpText id="email-err" tone="danger">이메일 형식이 올바르지 않습니다.</HelpText>미리보기
이메일 형식이 올바르지 않습니다.
입력 요소의 aria-describedby와 HelpText의 id를 반드시 연결하세요. 그래야 포커스 시 스크린리더가 제목 → 값 → 힌트 순으로 맥락을 읽어줍니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | aria-describedby 연결용 id. | |
tone | "default" | "danger" | "default" | 오류 시 danger 색상. |