フォーム

カスタムスタイル、サイジング、フォーカスステートなどで、<input>や<textarea>などのテキストフォームコントロールをアップグレードしましょう。

Example

フォーム・コントロールはSassとCSS変数を組み合わせてスタイリングされ、カラーモードに適応し、あらゆるカスタマイズ方法をサポートします。

vue
<template>
 <b-div margin="b-3">
  <BFormLabel for="exampleBFormControlInput1">
   Email address
  </BFormLabel>
  <BFormInput
   id="exampleBFormControlInput1"
   type="email"
   placeholder="name@example.com"
  />
 </b-div>
 <b-div margin="b-3">
  <BFormLabel for="exampleBFormControlTextarea1">
   Example textarea
  </BFormLabel>
  <BFormTextarea
   id="exampleBFormControlTextarea1"
   rows="3"
  />
 </b-div>
</template>

Sizing

form-control-lgやform-control-smなどのクラスを使って高さを設定します。

vue
<template>
 <BFormInput
  size="lg"
  type="text"
  placeholder=".form-control-lg"
  aria-label=".form-control-lg example"
 />
 <BFormInput
  type="text"
  placeholder="Default input"
  aria-label="default input example"
 />
 <BFormInput
  size="sm"
  type="text"
  placeholder=".form-control-sm"
  aria-label=".form-control-sm example"
 />
</template>

Form text

ブロックレベルまたはインラインレベルのフォームテキストは、.form-textを使って作成できます。

フォーム・テキストは、aria-describedby属性を使って、関連するフォーム・コントロールと明示的に関連づけられるべきです。こうすることで、スクリーン・リーダーなどの支援技術が、ユーザがコントロールに焦点を合わせたり入力したりするときに、このフォーム・テキストをアナウンスするようになります。

入力の下のフォーム・テキストは、.form-textでスタイルできます。ブロック-レベル要素が使用される場合、上の入力との間隔を取りやすくするために上マージンが追加されます。

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
vue
<template>
 <BFormLabel for="inputPassword5">
  Password
 </BFormLabel>
 <BFormInput
  id="inputPassword5"
  type="password"
  aria-describedby="passwordHelpBlock"
 />
 <BFormText id="passwordHelpBlock">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
 </BFormText>
</template>

インラインテキストは、典型的なインラインHTML要素（span smallであれ、それ以外のものであれ）であれば、.form-textクラス以外何も使わずに使うことができます。

Must be 8-20 characters long.
vue
<template>
 <Row
  align-items="center"
  justify-content="start"
 >
  <Col col="auto">
   <BColFormLabel for="inputPassword6">
    Password
   </BColFormLabel>
  </Col>
  <Col col="auto">
   <BFormInput
    id="inputPassword6"
    type="password"
    aria-describedby="passwordHelpInline"
   />
  </Col>
  <Col col="auto">
   <BFormText id="passwordHelpInline">
    <span>Must be 8-20 characters long.</span>
   </BFormText>
  </Col>
 </Row>
</template>

Disabled

disabledブーリアン属性を入力に追加して、グレーアウトした外観を与え、ポインタ・イベントを削除し、フォーカスを妨げます。

vue
<template>
 <BFormInput
  type="text"
  placeholder="Disabled input"
  aria-label="Disabled input example"
  disabled
 />
 <BFormInput
  type="text"
  value="Disabled readonly input"
  aria-label="Disabled input example"
  disabled
  readonly
 />
</template>

Readonly

入力にreadonly boolean属性を追加すると、入力値の変更を防ぐことができます。readonly入力はまだフォーカスしたり選択することができますが、disabled入力はできません。

vue
<template>
 <BFormInput
  type="text"
  value="Readonly input here..."
  aria-label="readonly input example"
  readonly
 />
</template>

Readonly plain text

フォームの <input>要素をプレーン・テキストとしてスタイルしたい場合は、.form-controlを.form-control-plaintextに置き換えることで、デフォルトのフォーム・フィールド・スタイルが削除され、正しいマージンとパディングが維持されます。

vue
<template>
 <Row margin="b-3">
  <BColFormLabel
   for="staticEmail"
   class="col-sm-2"
  >
   Email
  </BColFormLabel>
  <Col col="sm-10">
   <BFormInput
    id="staticEmail"
    type="text"
    readonly="plaintext"
    value="email@example.com"
   />
  </Col>
 </Row>
 <Row margin="b-3">
  <BColFormLabel
   for="inputPassword"
   class="col-sm-2 col-form-label"
  >
   Password
  </BColFormLabel>
  <Col col="sm-10">
   <BFormInput
    id="inputPassword"
    type="password"
   />
  </Col>
 </Row>
</template>
vue
<template>
 <BForm>
  <Row gutter="3">
   <Col col="auto">
    <b-label
     for="staticEmail2"
     visually-hidden
    >
     Email
    </b-label>
    <BFormInput
     id="staticEmail2"
     type="text"
     readonly="plaintext"
     value="email@example.com"
    />
   </Col>
   <Col col="auto">
    <b-label
     for="inputPassword2"
     visually-hidden
    >
     Password
    </b-label>
    <BFormInput
     id="inputPassword2"
     type="password"
     placeholder="Password"
    />
   </Col>
   <Col col="auto">
    <b-button
     type="submit"
     color="primary"
     margin="b-3"
    >
     Confirm identity
    </b-button>
   </Col>
  </Row>
 </BForm>
</template>

File input

vue
<template>
 <Row margin="b-3">
  <BFormLabel for="formFile">
   Default file input example
  </BFormLabel>
  <BFormFile id="formFile" />
 </Row>
 <Row margin="b-3">
  <BFormLabel for="formFileMultiple">
   Multiple files input example
  </BFormLabel>
  <BFormFile
   id="formFileMultiple"
   multiple
  />
 </Row>
 <Row margin="b-3">
  <BFormLabel for="formFileDisabled">
   Disabled file input example
  </BFormLabel>
  <BFormFile
   id="formFileDisabled"
   disabled
  />
 </Row>
 <Row margin="b-3">
  <BFormLabel for="formFileSm">
   Small file input example
  </BFormLabel>
  <BFormFile
   id="formFileSm"
   size="sm"
  />
 </Row>
 <Row>
  <BFormLabel for="formFileLg">
   Large file input example
  </BFormLabel>
  <BFormFile
   id="formFileLg"
   size="lg"
  />
 </Row>
</template>

Color

type="color"を設定し、 <input> に.form-control-colorを追加します。 モディファイア・クラスを使って高さを固定にし、ブラウザ間の矛盾をオーバーライドします。

vue
<template>
 <BFormLabel for="exampleColorInput">
  Color picker
 </BFormLabel>
 <BFormColor
  id="exampleColorInput"
  title="Choose your color"
 />
</template>

Datalists

データリストは、入力の中からアクセスできる（そしてオートコンプリートできる）<option>のグループを作成することができます。 これらは<select>要素に似ていますが、より多くのメニュースタイルの制限と違いがあります。ほとんどのブラウザやオペレーティングシステムは<datalist>要素をある程度サポートしていますが、そのスタイリングには一貫性がありません。

datalist要素のサポート についての詳細はこちら。

vue
<template>
 <BFormLabel for="exampleDataList">
  Datalist example
 </BFormLabel>
 <BFormInput
  id="exampleDataList"
  list="datalistOptions"
  placeholder="Type to search..."
 />
 <BDatalist id="datalistOptions">
  <option value="San Francisco" />
  <option value="New York" />
  <option value="Seattle" />
  <option value="Los Angeles" />
  <option value="Chicago" />
 </BDatalist>
</template>

See Also