フローティングラベル

入力フィールドの上に浮かんでいる美しいシンプルなフォームラベルを作成します。

Example

FormFloating コンポーネントを使って、Bootstrap のテキストフォームフィールドでフローティングラベルを有効にします。

CSS だけのフローティング・ラベルのメソッドは、 :placeholder-shown 疑似要素を利用しているので、それぞれの FormInput にプレースホルダーが必要です。

また、兄弟セレクタ(例: ~)を利用できるように、 FormInput が最初に来なければならないことにも注意してください。

vue
<template>
 <BFormFloating margin="b-3">
  <BFormInput
   id="floatingInput"
   type="email"
   placeholder="name@example.com"
  />
  <BFormLabel for="floatingInput">
   Email address
  </BFormLabel>
 </BFormFloating>
 <BFormFloating>
  <BFormInput
   id="floatingPassword"
   type="password"
   placeholder="Password"
  />
  <BFormLabel for="floatingPassword">
   Password
  </BFormLabel>
 </BFormFloating>
</template>

すでに定義されている value がある場合、FormLabel は自動的に浮いた位置に調整されます。

vue
<template>
 <BFormFloating>
  <BFormInput
   id="floatingInputValue"
   type="email"
   placeholder="name@example.com"
   value="test@example.com"
  />
  <BLabel for="floatingInputValue">
   Input with value
  </BLabel>
 </BFormFloating>
</template>

フォームのバリデーションスタイルも期待通りに動作します。

vue
<template>
 <BFormFloating>
  <BFormInput
   id="floatingInputInvalid"
   type="email"
   valid="false"
   placeholder="name@example.com"
   value="test@example.com"
  />
  <BFormLabel for="floatingInputInvalid">
   Invalid input
  </BFormLabel>
 </BFormFloating>
</template>

Textareas

デフォルトでは、 FormTextarea は FormInput と同じ高さになります。

vue
<template>
 <BFormFloating>
  <BFormTextarea
   id="floatingTextarea"
   placeholder="Leave a comment here"
  />
  <BFormLabel for="floatingTextarea">
   Comments
  </BFormLabel>
 </BFormFloating>
</template>

FormTextareaにカスタムの高さを設定するために、rows 属性を使用しないでください。

その代わりに、明示的な height を設定します (インラインまたはカスタム CSS を使用して)。

vue
<template>
 <BFormFloating>
  <BFormTextarea
   id="floatingTextarea2"
   placeholder="Leave a comment here"
   style="height: 100px"
  />
  <BFormLabel for="floatingTextarea2">
   Comments
  </BFormLabel>
 </BFormFloating>
</template>

Selects

FormControl 以外では、フローティングラベルは FormSelect でのみ利用できます。

これらは同じように動作しますが、FormInputとは異なり、常にFormLabelをフローティング状態で表示します。

sizeやmultipleを使った選択はサポートされていません。

vue
<template>
 <BFormFloating>
  <BFormSelect
   id="floatingSelect"
   aria-label="Floating label select example"
  >
   <option selected>
    Open this select menu
   </option>
   <option value="1">
    One
   </option>
   <option value="2">
    Two
   </option>
   <option value="3">
    Three
   </option>
  </BFormSelect>
  <BFormLabel for="floatingSelect">
   Works with selects
  </BFormLabel>
 </BFormFloating>
</template>

Layout

グリッドシステムで作業する場合、フォーム要素をカラムクラス内に配置することを確認してください。

vue
<template>
 <Row gutter="2">
  <Col col="md">
   <BFormFloating>
    <BFormInput
     id="floatingInputGrid"
     type="email"
     placeholder="name@example.com"
     value="test@example.com"
    />
    <BFormLabel for="floatingInputGrid">
     Email address
    </BFormLabel>
   </BFormFloating>
  </Col>

  <!-- <div class="col-md"> -->
  <Col col="md">
   <BFormFloating>
    <BFormSelect
     id="floatingSelectGrid"
     aria-label="Floating label select example"
    >
     <option selected>
      Open this select menu
     </option>
     <option value="1">
      One
     </option>
     <option value="2">
      Two
     </option>
     <option value="3">
      Three
     </option>
    </BFormSelect>
    <BFormLabel for="floatingSelectGrid">
     Works with selects
    </BFormLabel>
   </BFormFloating>
  </Col>
 </Row>
</template>

See Also