Neumorphism UI
フォームと選択@neumorphism-ui/label

Label

すべての標準属性を引き渡す、native label の薄い wrapper です。peer-disabled 状態に対応したテキスト色と cursor スタイルを提供します。

@neumorphism-ui/label
Registry JSON

プレビュー

ラベルをクリックすると、関連する入力欄へ移動します。

インストール

インストール: labelnpx shadcn@latest add @neumorphism-ui/label

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定 を完了してください。

使い方

Import

Label の import コード
import { Label } from "@/components/ui/label"

Example

Label の使用コード
<div className="grid gap-2">
  <Label htmlFor="project-name">プロジェクト名</Label>
  <Input id="project-name" name="projectName" />
</div>

API リファレンス

コンポーネントプロパティ型デフォルト説明
LabelhtmlForstring—関連付ける form control の id です。
Labelchildren必須React.ReactNode—control の目的を説明するテキストです。
LabelclassNamestring—layout と状態のスタイルを拡張します。

アクセシビリティ

  • 01

    htmlFor は対象 control の id と完全に一致させてください。

  • 02

    RadioGroup など control の group に名前を付ける場合は、単独の Label ではなく fieldset と legend、または aria-labelledby を使用してください。

  • 03

    必須状態や補足説明は、視覚的な表示に加えて required と aria-describedby でも伝えてください。