ラベルLabelBeta

入力欄や選択肢に紐づくラベルを表示します。

プレビュー

状態とバリエーション

入力欄のラベル

入力欄の id と紐づけると、ラベルをクリックして入力欄へフォーカスできます。

チェック項目のラベル

チェックボックスやラジオボタンでは、操作対象とラベルを横並びにして選択内容を明確にします。

ラジオ選択肢

排他的な選択肢では、各ラベルを対象のラジオボタンに紐づけます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
htmlForstring-ラベルと対象の入力欄を紐づける ID です。
childrenReactNode-ラベルとして表示するテキストや要素です。

使い方

import { FormControl, FormGroup, FormLabel, Input } from "@gunjo/ui";

export function DisplayNameField() {
  return (
    <FormGroup className="w-full max-w-sm">
      <FormLabel htmlFor="display-name">表示名</FormLabel>
      <FormControl>
        <Input id="display-name" />
      </FormControl>
    </FormGroup>
  );
}

使用コンポーネント

LabelFormLabelFormGroupFormControl

関連コンポーネント

InputCheckboxRadioGroupForm