Neumorphism UI

Label

フォーム部品の名前を表示し、テキストからも操作できるようにする場合に使います。

プレビュー

入力と設定のラベル

メールのラベルで入力にフォーカスし、週次レポートのラベルで対応するスイッチを切り替えます。

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

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/label

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

入力と設定のラベル

npx shadcn@latest add @neumorphism-ui/input @neumorphism-ui/label @neumorphism-ui/switch
Registry JSON

使い方

Label の htmlFor を部品の id と一致させます。ラベルは表示したままにし、入力例や検証結果は別の補足文にします。

"use client";

import { useId } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Project name</Label>
      <Input id={id} name="projectName" />
    </div>
  );
}

API リファレンス

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

コンポーネントプロパティ型デフォルト説明
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 でも伝えてください。