ラベル

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

ファーストネーム

import React from 'react';
import * as Label from '@radix-ui/react-label';
import './styles.css';

const LabelDemo = () => (
  <div
    style={{ display: 'flex', padding: '0 20px', flexWrap: 'wrap', gap: 15, alignItems: 'center' }}
  >
    <Label.Root className="LabelRoot" htmlFor="firstName">
      First name
    </Label.Root>
    <input className="Input" type="text" id="firstName" defaultValue="Pedro Duarte" />
  </div>
);

export default LabelDemo;

機能

ラベルをダブルクリックしたときのテキスト選択を防止します。

ネストされたコントロールをサポートします。

インストール

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

npm install @radix-ui/react-label

構成

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

import * as Label from '@radix-ui/react-label';

export default () => <Label.Root />;

APIリファレンス

ルート

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

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`
`htmlFor`	`文字列`	デフォルト値なし

アクセシビリティ

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

前へホバーカード

次へメニューバー

GitHubでこのページを編集

概要

ガイド

コンポーネント

ユーティリティ

ラベル

機能

インストール

構成

APIリファレンス

ルート

アクセシビリティ