Installation
bash
npx axis-cli add labelUsage
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
| Prop | Type | Default | Description |
|---|---|---|---|
htmlFor | string | - | 연결할 input의 id |
className | string | - | 추가 CSS 클래스 |
htmlForType:
stringDefault:
-연결할 input의 id
classNameType:
stringDefault:
-추가 CSS 클래스
Accessibility
htmlFor로 폼 컨트롤과 연결되는 접근 가능한 라벨입니다.
- 라벨 클릭 시 연결된 컨트롤로 포커스가 이동합니다.
- htmlFor 값을 컨트롤의 id와 일치시키세요.