Label

폼 요소에 대한 접근 가능한 레이블

Basic Usage

Label은 폼 요소와 연결하여 접근성을 높입니다.

tsx

<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="you@example.com" />

With Checkbox

체크박스와 함께 사용하는 예시입니다.

Accept terms and conditions

tsx

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Required Field

필수 필드를 표시하는 예시입니다.

Username*

tsx

<Label htmlFor="username">
  Username
  <span className="text-destructive">*</span>
</Label>
<Input type="text" id="username" placeholder="Enter username" required />

Disabled State

비활성화된 필드의 Label은 흐리게 표시됩니다.

Disabled Field

tsx

<Label htmlFor="disabled-input" className="peer-disabled:opacity-50">
  Disabled Field
</Label>
<Input
  type="text"
  id="disabled-input"
  placeholder="Disabled"
  disabled
  className="peer"
/>

Usage

tsx

import { Label } from '@gpters-internal/ui';

function Example() {
  return (
    <div className="grid gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="you@example.com" />
    </div>
  );
}