레이블

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

Label은 폼 컨트롤에 캡션을 붙입니다. 컨트롤의 id와 짝지으면 텍스트 클릭으로 필드에 포커스하거나 토글합니다. 이 변형은 프리미티브 의존성 없이 스타일만 입힌 네이티브 <label> 요소이며, 네오브루탈리즘 제목 서체로 설정되어 있습니다.

다음과 같은 경우에 사용합니다.

• 단독 컨트롤 — 전체 Field까지는 필요 없는 체크박스, 스위치, 라디오 그룹. 동의 체크, 알림 토글 등.
• 설정 행 — 캡션 전체가 클릭 대상인 스위치+레이블 쌍.
• 맞춤 폼 레이아웃 — Field의 세로 쌓기 구조가 맞지 않는 그리드나 인라인 배치.

설치#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/label.json
npx shadcn@latest add https://neobrutalism.com/r/base/label.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/label.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/label.json
복사

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
복사

"use client"

import * as React from "react"
import { Label as LabelPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        "flex items-center gap-2 text-sm leading-none font-head font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}

export { Label }

사용법#

복사import { Label } from "@/components/ui/label"

복사<Label htmlFor="email">Your email address</Label>

Field 안의 Label#

폼 필드에는 FieldLabel, FieldDescription, FieldError 컴포넌트를 기본으로 갖춘 Field 컴포넌트를 사용하세요.

복사<Field>
  <FieldLabel htmlFor="email">Your email address</FieldLabel>
  <Input id="email" />
</Field>

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {

RTL#

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

접근성#

Label은 네이티브 <label> 요소를 렌더링합니다. htmlFor를 컨트롤의 id에 맞추거나(또는 컨트롤을 레이블 안에 중첩하면) 스크린 리더가 그 텍스트를 컨트롤의 접근 가능한 이름으로 읽고, 레이블 클릭으로 포커스하거나 토글합니다. 스타일에 select-none이 포함되어 레이블을 더블 클릭해도 텍스트가 선택되지 않습니다. <label>은 폼 컨트롤에만 연결됩니다. 커스텀 위젯에는 aria-labelledby를 레이블의 id로 가리키세요.

API 참조#

자세한 내용은 Base UI 문서를 참고하세요.