ラベル

コントロールに関連付けられた、アクセシブルなラベルをレンダリングします。

名

<script setup lang="ts">
import { Label } from 'radix-vue'
</script>

<template>
  <div class="flex flex-wrap items-center gap-[15px] px-5">
    <Label
      class="text-[15px] font-semibold leading-[35px] text-white"
      for="firstName"
    > First name </Label>
    <input
      id="firstName"
      class="bg-blackA5 shadow-blackA9 inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA9"
      type="text"
      value="Pedro Duarte"
    >
  </div>
</template>

機能

• ラベルをダブルクリックしたときにテキスト選択が防止されます。
• ネストされたコントロールをサポートします。

インストール

コマンドラインからコンポーネントをインストールします。

$ npm add radix-vue

構造

コンポーネントをインポートします。

<script setup>
import { Label } from 'radix-vue'
</script>

<template>
  <Label />
</template>

APIリファレンス

ルート

ラベルのコンテンツを含みます。

Prop	デフォルト	タイプ
as	'label'	AsTag | コンポーネント このコンポーネントがレンダリングする要素またはコンポーネント。asChildで上書きできます。
asChild		boolean 子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。 詳細については、コンポジションガイドをお読みください。
for		string ラベルが関連付けられている要素のID。

アクセシビリティ

このコンポーネントはネイティブのlabel要素に基づいており、コントロールをラップする場合やfor属性を使用する場合、正しいラベル付けを自動的に適用します。独自のカスタムコントロールが正しく機能するように、buttonやinputなどのネイティブ要素をベースとして使用していることを確認してください。