Description

컨트롤 아래의 보조 텍스트입니다. Field의 파트가 아니라 형제 요소입니다. aria-describedby에서 가리킬 수 있도록 id가 필수입니다. 이 컴포넌트는 컨트롤에 아무것도 쓰지 않습니다.

aria-describedby는 Field.TextInput이 아니라 Field.Root에 두세요. Root가 그 문자열을 입력에 복사합니다. TextInput은 입력 수준의 aria를 덮어씁니다.

Field와 함께

Description은 자신의 간격을 스스로 가집니다. margin-block-start는 컨트롤로부터 field.label.gap(0.4rem)입니다. margin-block-end는 0입니다. 컨트롤 뒤에 두세요. 감싸지 마세요.

.labelled-field는 여전히 Label과 컨트롤 사이 간격을 잡습니다. 컨트롤과 Description 사이 간격은 잡지 않습니다.

.labelled-field {
	display: flex;
	flex-direction: column;
}

.labelled-field
	> :not([data-todae-description], [data-todae-error])
	+ :not([data-todae-description], [data-todae-error]) {
	margin-block-start: var(--todae-field-label-gap);
}

const id = useId()
const hintId = useId()

<div className="labelled-field">
	<Label htmlFor={id}>Work email</Label>
	<Field.Root id={id} aria-describedby={hintId}>
		<Field.TextInput value={v} onChange={(event) => setV(event.target.value)} />
	</Field.Root>
	<Description id={hintId}>We only use this for billing receipts.</Description>
</div>

이것은 Dialog.Description이 아닙니다. Dialog의 Description은 aria-describedby를 대신 연결해 줍니다. 폼의 Description은 그렇지 않습니다.

언제 쓰나요

언제: 컨트롤 아래, 컨트롤 뒤의 형제 요소로 두는 힌트 텍스트. id가 필요합니다. 컨트롤에, Field 안이라면 Field.Root에 있는 aria-describedby에 넣으세요.

쓰지 않을 때: 유효성 오류 → ErrorMessage. 다이얼로그 보조 텍스트 → Dialog.Description(스스로 연결됩니다). 보이는 이름 → Label.

Props