useField

useField()는 내장 파트가 가장 가까운 Field.Root에 합류하는 방식 그대로, 직접 만든 컨트롤을 합류시킵니다. 컨트롤에 getControlProps()를 펼치세요. 여기에는 Root의 id, name, disabled, aria-invalid, 병합된 aria-describedby, 컨트롤이 스스로 이름을 붙이지 않을 때의 Root 이름, 그리고 셸을 누르면 컨트롤에 포커스가 가도록 하는 ref가 담깁니다. 셸은 이 컨트롤의 포커스 링도 그립니다. 네이티브 폼 요소가 아닌 컨트롤에는 getControlProps(props, { native: false })를 호출하세요. disabled 대신 aria-disabled를 설정하고, 폼 요소만 제출하는 name은 빼 줍니다. 탭 정지를 건너뛰고 키를 무시하려면 useField()에서 Root의 disabled를 읽으세요. 직접 넘긴 disabled나 aria-invalid는 Root의 값에 더해질 뿐 그 값을 지우지 않으므로, 같은 검사에서 자신의 값과 함께 조합하세요. Label htmlFor는 레이블을 붙일 수 있는 요소에만 이름을 주므로, 커스텀 요소는 Root의 aria-labelledby로 이름을 붙이세요.

function Stars(props) {
	const field = useField()
	return <span {...field.getControlProps({}, { native: false })} role="slider" tabIndex={field.disabled ? -1 : 0} … />
}

언제 쓰나요

언제: 별점이나 색상 선택기처럼 직접 만든 컨트롤이 Field.Root 안에 있고, 그 id, 이름, 설명, invalid 상태가 필요할 때.

쓰지 않을 때: 맞는 내장 파트가 이미 있을 때 → 그 파트를 쓰세요. 어떤 Field.Root에도 속하지 않는 컨트롤 → 자체 id를 연결하세요.

Props