Labelstandard

입력에 이름을 붙이는 라벨(label)입니다. shadcn base-nova 의 `label` 은 `label` 요소를 감쌉니다. 라벨·도움말·오류를 한 묶음으로 짜려면 `field` 를 씁니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/label

Default

With Checkbox

Accept terms and conditions

With Input

Disabled

With Textarea

label-example.tsx

import {  Example,  ExampleWrapper,} from "@/components/example"import { Checkbox } from "@/components/ui/checkbox"import { Field } from "@/components/ui/field"import { Input } from "@/components/ui/input"import { Label } from "@/components/ui/label"import { Textarea } from "@/components/ui/textarea"
export default function LabelExample() {  return (    <ExampleWrapper>      <LabelWithCheckbox />      <LabelWithInput />      <LabelDisabled />      <LabelWithTextarea />    </ExampleWrapper>  )}
function LabelWithCheckbox() {  return (    <Example title="With Checkbox">      <Field orientation="horizontal">        <Checkbox id="label-demo-terms" />        <Label htmlFor="label-demo-terms">Accept terms and conditions</Label>      </Field>    </Example>  )}
function LabelWithInput() {  return (    <Example title="With Input">      <Field>        <Label htmlFor="label-demo-username">Username</Label>        <Input id="label-demo-username" placeholder="Username" />      </Field>    </Example>  )}
function LabelDisabled() {  return (    <Example title="Disabled">      <Field data-disabled={true}>        <Label htmlFor="label-demo-disabled">Disabled</Label>        <Input id="label-demo-disabled" placeholder="Disabled" disabled />      </Field>    </Example>  )}
function LabelWithTextarea() {  return (    <Example title="With Textarea">      <Field>        <Label htmlFor="label-demo-message">Message</Label>        <Textarea id="label-demo-message" placeholder="Message" />      </Field>    </Example>  )}