FieldMessage

입력 아래 규칙과 오류를 아이콘과 문장으로 표시.

개요

미리보기

예시 언어동작 줄이기

입력 후 다른 곳을 누르면 형식을 확인해요.

status

disabled

children

이렇게 규칙은 입력 전부터 보이고 aria-describedby로 연결한다. 오류는 사용자를 탓하지 않고 고치는 방법과 현재 상태를 말한다(“지금 {n}자예요”). 색만으로 오류를 나타내지 않는다.
이렇게 오류 문장은 무엇을 어떻게 고칠지 말한다. 예시 형식을 함께 쓴다.
이렇게 하지 않기 “형식이 맞음”을 초록 체크로 표시하지 않는다. 형식 검사는 사실 확인이 아니다.
이렇게 하지 않기 오류를 색만으로 표시하지 않는다. 아이콘과 문장이 함께 있다.

이름	타입	기본값	설명
`status?`	`'hint' \| 'error'`	`hint`	hint = 상시 도움말, error = 고칠 것. success는 없다(형식 확인을 사실 확인처럼 보이게 하지 않는다).
`disabled?`	`boolean`	`false`	필드가 disabled일 때 흐리게.
`children?`	`ReactNode`	`입력 후 다른 곳을 누르면 형식을 확인해요.`	문장. 비우면 보이지 않지만 노드는 남는다(describedby 대상 유지).
그 밖의 속성	—	—	id(필드의 aria-describedby가 가리킴), aria-live(비동기 검증 결과에만, 노드를 미리 마운트) 등 네이티브 div 속성은 그대로 전달된다. className·style은 받지 않는다.

예시

이렇게 · 이렇게 하지 않기

이렇게 규칙은 입력 전부터 보이고 aria-describedby로 연결한다. 오류는 사용자를 탓하지 않고 고치는 방법과 현재 상태를 말한다(“지금 {n}자예요”). 색만으로 오류를 나타내지 않는다.

이렇게 오류 문장은 무엇을 어떻게 고칠지 말한다. 예시 형식을 함께 쓴다.

이렇게 하지 않기 “형식이 맞음”을 초록 체크로 표시하지 않는다. 형식 검사는 사실 확인이 아니다.

이렇게 하지 않기 오류를 색만으로 표시하지 않는다. 아이콘과 문장이 함께 있다.

토큰과 속성

이름	타입	기본값	설명
`status?`	`'hint' \| 'error'`	`hint`	hint = 상시 도움말, error = 고칠 것. success는 없다(형식 확인을 사실 확인처럼 보이게 하지 않는다).
`disabled?`	`boolean`	`false`	필드가 disabled일 때 흐리게.
`children?`	`ReactNode`	`입력 후 다른 곳을 누르면 형식을 확인해요.`	문장. 비우면 보이지 않지만 노드는 남는다(describedby 대상 유지).
그 밖의 속성	—	—	id(필드의 aria-describedby가 가리킴), aria-live(비동기 검증 결과에만, 노드를 미리 마운트) 등 네이티브 div 속성은 그대로 전달된다. className·style은 받지 않는다.