Label

컨트롤과 연결된 접근 가능한 라벨을 렌더링해 주는 컴포넌트예요.

출처: 문서

본문

폼 컨트롤과 시각적/시맨틱하게 연결된 라벨을 렌더링해 주는 컴포넌트예요. 라벨을 두 번 클릭해도 텍스트가 선택되지 않게 막아 주고, 중첩된 컨트롤도 지원해요.

컴포넌트를 임포트해요.

import { Label } from "radix-ui";

export default () => <Label.Root />;

라벨의 콘텐츠를 담아요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`htmlFor`	`string`	No default value

이 컴포넌트는 네이티브 label 요소를 기반으로 해요. 컨트롤을 감싸거나 htmlFor 속성을 사용하면 올바른 라벨링이 자동으로 적용돼요. 커스텀 컨트롤에서도 잘 동작하게 하려면 button이나 input 같은 네이티브 요소를 기반으로 사용해야 해요.