Label

폼 필드에 대한 접근성 레이블 컴포넌트입니다.

Installation

bash
npx axis-cli add label

Usage

tsx
import { Label } from '@axis-ds/ui-react'

export function Example() {
  return <Label htmlFor="email">Email</Label>
}

With Input

tsx
import { Input, Label } from '@axis-ds/ui-react'

export function Example() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Enter your email" />
    </div>
  )
}

Props

htmlFor
Type:string
Default:-

연결할 input의 id

className
Type:string
Default:-

추가 CSS 클래스

Accessibility

htmlFor로 폼 컨트롤과 연결되는 접근 가능한 라벨입니다.

  • 라벨 클릭 시 연결된 컨트롤로 포커스가 이동합니다.
  • htmlFor 값을 컨트롤의 id와 일치시키세요.