> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/label.md).

# Label

本来のLabelの多くは、HTMLのフォーム要素を説明するために使われます。例えば、主に `<input>` や `<select>` などの入力欄に対してキャプションを付ける役割です。

Dashcombが提供しているInputやSelectなどのコンポーネントは通常のLabelを内蔵しているため、これらのコンポーネントのためにLabel コンポーネントを追加する必要がありません。Label コンポーネントはこれらの機能をベースにしつつ、複数の要素の説明、画面の注意書きやエリアのコメントなどとしても、より自由に使えるラベルとなっています。

### プロパティ

Labelコンポーネントには、以下のプロパティが含まれています。

<figure><img src="/files/dhbLo05Q7166ox7pkcEO" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

#### **オブジェクト**

ラベルオブジェクトの変数名です。Labelコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `label1`、`label2`... と名付けられます。

ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。

（例）`{{label1.hidden}}` で `label1` の表示状態の真偽値を取得することができます。

利用できるオブジェクトとプロパティは、[インスペクターメニュー](/dashcomb-help-center/ide/region/inspector-region.md) で確認できます。

#### 非表示

トグルスイッチをONにすると、ラベルが非表示になります。

現在の設定値は、`{{オブジェクト名.readonly}}` で参照できます。

#### 無効

トグルスイッチをONにすると、ラベルが無効になり、入力できなくなります。

通常のhtmlのlabel要素のdisabled属性に該当します。

現在の設定値は、`{{オブジェクト名.disabled}}` で参照できます。

***

### データ <a href="#data" id="data"></a>

#### ラベル文字

ラベルに表示するテキストです。Label コンポーネントをドラッグ＆ドロップすると、自動的に `Label` に設定されます。

`Label` を任意の文字列に入れ替えることはもちろん、構文 `{{オブジェクト名.プロパティ}}` を入れることにより、動的に設定することができます。

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](/dashcomb-help-center/ide/obujekutoyadtano.md) のページを参照してください。
{% endhint %}

### &#x20;<a href="#appearance" id="appearance"></a>

### 外観 <a href="#appearance" id="appearance"></a>

#### サイズ

ラベルテキストの表示サイズを選択します。S、M、L の3つから選択できます。

#### 太字

トグルスイッチをONにすると、ラベルテキストを太字で表示します。

#### 斜体

トグルスイッチをONにすると、ラベルテキストを斜体で表示します。

#### ラベル整列

ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。