Label

폼 컨트롤의 이름을 눈에 보이게 제공하고 텍스트도 클릭 영역으로 연결할 때 사용합니다.

미리보기

입력과 설정의 레이블

이메일 레이블로 입력에 포커스하고 주간 리포트 레이블로 연결된 스위치를 전환합니다.

레이블을 클릭하면 연결된 입력으로 이동합니다.이메일 주소

주간 리포트 받기

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/label

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

입력과 설정의 레이블

npx shadcn@latest add @neumorphism-ui/input @neumorphism-ui/label @neumorphism-ui/switch

Registry JSON

사용법

Label의 htmlFor와 컨트롤의 id를 일치시키세요. 레이블은 계속 보이게 두고 예시나 오류 안내는 별도 보조 텍스트로 제공합니다.

"use client";

import { useId } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Project name</Label>
      <Input id={id} name="projectName" />
    </div>
  );
}

API 레퍼런스

native label을 얇게 감싼 컴포넌트로 모든 표준 속성을 전달합니다. peer-disabled 상태와 일치하는 글자색과 cursor를 제공합니다.

컴포넌트	속성	타입	기본값	설명
`Label`	`htmlFor`	`string`	`—`	연결할 form control의 id입니다.
`Label`	`children`필수	`React.ReactNode`	`—`	control의 목적을 설명하는 텍스트입니다.
`Label`	`className`	`string`	`—`	레이아웃과 상태 스타일을 확장합니다.

미리보기

입력과 설정의 레이블

설치

사용법

API 레퍼런스

접근성