72はじめる
HextaUI

Label

コントロールに追従するラベル。無効時には薄くなり、必須または任意の表示も自動で付けます。

import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-demo-email" indicator="required">
          Email
        </Label>
        <Input
          id="label-demo-email"
          type="email"
          autoComplete="email"
          required
        />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-demo-team" indicator="required">
          Team
        </Label>
        <Input id="label-demo-team" defaultValue="Design systems" disabled />
      </div>
      <Label>
        <Checkbox defaultChecked />
        Send me product updates
      </Label>
    </div>
  )
}

インストール

pnpm dlx shadcn@latest add https://hextaui.com/r/label.json

コンポーネント、HextaUIのテーマトークン、依存するHextaUIコンポーネントを追加します。

使い方

import { Label } from "@/components/ui/label"
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />

htmlFor をコントロールの id に向けるか、コントロールを囲みます。どちらでも、ラベルはコントロールを見つけてその状態に追従します。<Field /> の中では、id を自動で結び付ける <FieldLabel /> を使ってください。

例

コントロールに追従

コントロールが無効の間、ラベルは薄くなり not-allowed カーソルを表示します。独自のスタイル用に data-required、data-invalid、data-readonly も公開されます。コントロールが変化しても追従します。

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelStates() {
  const [locked, setLocked] = React.useState(true)

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-states-domain">Custom domain</Label>
        <Input
          id="label-states-domain"
          defaultValue="docs.example.com"
          disabled={locked}
        />
      </div>
      <Button
        variant="outline"
        size="sm"
        className="self-start"
        onClick={() => setLocked(!locked)}
      >
        {locked ? "Unlock" : "Lock"}
      </Button>
    </div>
  )
}

必須と任意

indicator="optional" は required のないコントロールにタグを付け、indicator="required" は付いているコントロールにアスタリスクを追加します。印はスクリーンリーダーからは隠されます。必須フィールドはすでに読み上げられるためです。

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

export function LabelIndicator() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-name" indicator="optional">
          Full name
        </Label>
        <Input id="label-indicator-name" autoComplete="name" required />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-company" indicator="optional">
          Company
        </Label>
        <Input id="label-indicator-company" autoComplete="organization" />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-card" indicator="required">
          Card number
        </Label>
        <Input id="label-indicator-card" inputMode="numeric" required />
      </div>
    </div>
  )
}

Checkbox

チェックボックスを囲んでラベル全体で切り替えるか、htmlFor でラベルを隣に置きます。どちらの場合も、無効なチェックボックスはラベルを薄くします。

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export function LabelCheckbox() {
  return (
    <div className="flex flex-col gap-4">
      <Label>
        <Checkbox defaultChecked />
        Email me when someone replies
      </Label>
      <Label>
        <Checkbox disabled />
        Weekly digest (coming soon)
      </Label>
      <div className="flex items-center gap-2">
        <Checkbox id="label-checkbox-terms" />
        <Label htmlFor="label-checkbox-terms">Accept the terms</Label>
      </div>
    </div>
  )
}

アイコン

ラベル内のアイコンは、テキストの隣に収まるようにサイズが調整され、色も抑えられます。

import { IconLock } from "@tabler/icons-react"

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

export function LabelIcon() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="label-icon-key">
        <IconLock aria-hidden="true" />
        API key
      </Label>
      <Input id="label-icon-key" defaultValue="sk_live_51H…" readOnly />
    </div>
  )
}

長いコンテンツ

長いラベルは折り返され、区切りのない文字列はレイアウトを広げずに改行されます。

import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelLongContent() {
  return (
    <div className="flex w-64 max-w-full flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-long" indicator="optional">
          Where should we send invoices for the international subsidiary
        </Label>
        <Input id="label-long" />
      </div>
      <Label>
        <Checkbox />
        billing-notifications@an-extremely-long-company-domain.example.com
      </Label>
    </div>
  )
}

右から左

間隔とインジケーターは文字の読み方向に従います。

import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Label
          htmlFor="label-rtl-name"
          indicator="optional"
          optionalText="اختياري"
        >
          الاسم
        </Label>
        <Input id="label-rtl-name" />
      </div>
      <Label>
        <Checkbox defaultChecked />
        تذكرني
      </Label>
    </div>
  )
}

アクセシビリティ

  • ラベルをクリックするとコントロールにフォーカスが移るか切り替わるため、コントロール単体より大きなターゲットになります。
  • ラベルのテキストをダブルクリックしても選択されません。ラベル内のコントロールのダブルクリックは通常どおり動作します。
  • すべてのコントロールには名前が必要です。表示されるラベルがない場合は、コントロールに aria-label を使ってください。

APIリファレンス

<label> を描画し、その属性を受け付けます。

Label

プロパティ型デフォルト
htmlForコントロールの id。ラベルがコントロールを囲む場合は省略してください。
string–
indicatorコントロールの必須状態からラベルに印を付けます。デフォルトではオフです。
"required" | "optional"–
optionalText
ReactNode"Optional"
render
ReactElement | (props, state) => ReactElement<label>
属性説明
data-slot="label"CSS でラベルを指定します。
data-disabledコントロールが無効な間付きます。
data-requiredコントロールが必須の間付きます。
data-invalidコントロールが無効(invalid)な間付きます。ユーザーが操作した後、または aria-invalid が設定されたときです。
data-readonlyコントロールが読み取り専用の間付きます。
data-slot="label-indicator"必須または任意の印。

関連

使用しているブロック

Label の上に構築されるブロック。