フォーム制御

カスタムスタイル、サイジング、フォーカス状態などを備えた <input> や <textarea> などのテキスト入力フォーム制御をアップグレードします。

例

input または textarea などのテキスト入力制御には、FormControl コンポーネントを使用します。FormControl は、一般的な外観、フォーカス状態、サイズなどを変更するための追加のスタイルをいくつか追加します。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; function TextControlsExample() { return ( <Form> <Form.Group className="mb-3" controlId="exampleForm.ControlInput1"> <Form.Label>Email address</Form.Label> <Form.Control type="email" placeholder="name@example.com" /> </Form.Group> <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1"> <Form.Label>Example textarea</Form.Label> <Form.Control as="textarea" rows={3} /> </Form.Group> </Form> ); } export default TextControlsExample;

import Form from 'react-bootstrap/Form';

function TextControlsExample() {
  return (
    <Form>
      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="name@example.com" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
        <Form.Label>Example textarea</Form.Label>
        <Form.Control as="textarea" rows={3} />
      </Form.Group>
    </Form>
  );
}

export default TextControlsExample;

サイジング

<FormControl> で size を使用して、入力のサイズを変更します。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; function InputSizesExample() { return ( <> <Form.Control size="lg" type="text" placeholder="Large text" /> <br /> <Form.Control type="text" placeholder="Normal text" /> <br /> <Form.Control size="sm" type="text" placeholder="Small text" /> </> ); } export default InputSizesExample;

import Form from 'react-bootstrap/Form';

function InputSizesExample() {
  return (
    <>
      <Form.Control size="lg" type="text" placeholder="Large text" />
      <br />
      <Form.Control type="text" placeholder="Normal text" />
      <br />
      <Form.Control size="sm" type="text" placeholder="Small text" />
    </>
  );
}

export default InputSizesExample;

無効

入力に disabled プロップを追加して、グレー表示し、ポインターイベントを削除します。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; function FormControlDisabledExample() { return ( <> <Form.Control type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled readOnly /> <br /> <Form.Control type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" readOnly /> </> ); } export default FormControlDisabledExample;

import Form from 'react-bootstrap/Form';

function FormControlDisabledExample() {
  return (
    <>
      <Form.Control
        type="text"
        placeholder="Disabled input"
        aria-label="Disabled input example"
        disabled
        readOnly
      />
      <br />
      <Form.Control
        type="text"
        placeholder="Disabled readonly input"
        aria-label="Disabled input example"
        readOnly
      />
    </>
  );
}

export default FormControlDisabledExample;

読み取り専用

入力に readOnly プロパティを追加して、入力値の変更を防ぎます。読み取り専用の入力は薄暗い色で表示されます（無効な入力と同じように）、ただし標準カーソルは保持されます。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; function InputReadOnlyExample() { return ( <Form.Control type="text" placeholder="Readonly input here..." readOnly /> ); } export default InputReadOnlyExample;

import Form from 'react-bootstrap/Form';

function InputReadOnlyExample() {
  return (
    <Form.Control type="text" placeholder="Readonly input here..." readOnly />
  );
}

export default InputReadOnlyExample;

読み取り専用プレーンテキスト

フォーム内の読み取り専用要素をプレーンテキストとしてスタイル設定する場合は、FormControls で plaintext プロップを使用して、デフォルトのフォームフィールドスタイルを削除し、正しいマージンとパディングを保持します。

結果

読み込み中...

ライブエディター

import Col from 'react-bootstrap/Col'; import Form from 'react-bootstrap/Form'; import Row from 'react-bootstrap/Row'; function PlaintextExample() { return ( <Form> <Form.Group as={Row} className="mb-3" controlId="formPlaintextEmail"> <Form.Label column sm="2"> Email </Form.Label> <Col sm="10"> <Form.Control plaintext readOnly defaultValue="email@example.com" /> </Col> </Form.Group> <Form.Group as={Row} className="mb-3" controlId="formPlaintextPassword"> <Form.Label column sm="2"> Password </Form.Label> <Col sm="10"> <Form.Control type="password" placeholder="Password" /> </Col> </Form.Group> </Form> ); } export default PlaintextExample;

import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';

function PlaintextExample() {
  return (
    <Form>
      <Form.Group as={Row} className="mb-3" controlId="formPlaintextEmail">
        <Form.Label column sm="2">
          Email
        </Form.Label>
        <Col sm="10">
          <Form.Control plaintext readOnly defaultValue="email@example.com" />
        </Col>
      </Form.Group>

      <Form.Group as={Row} className="mb-3" controlId="formPlaintextPassword">
        <Form.Label column sm="2">
          Password
        </Form.Label>
        <Col sm="10">
          <Form.Control type="password" placeholder="Password" />
        </Col>
      </Form.Group>
    </Form>
  );
}

export default PlaintextExample;

ファイル入力

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; function FormFileExample() { return ( <> <Form.Group controlId="formFile" className="mb-3"> <Form.Label>Default file input example</Form.Label> <Form.Control type="file" /> </Form.Group> <Form.Group controlId="formFileMultiple" className="mb-3"> <Form.Label>Multiple files input example</Form.Label> <Form.Control type="file" multiple /> </Form.Group> <Form.Group controlId="formFileDisabled" className="mb-3"> <Form.Label>Disabled file input example</Form.Label> <Form.Control type="file" disabled /> </Form.Group> <Form.Group controlId="formFileSm" className="mb-3"> <Form.Label>Small file input example</Form.Label> <Form.Control type="file" size="sm" /> </Form.Group> <Form.Group controlId="formFileLg" className="mb-3"> <Form.Label>Large file input example</Form.Label> <Form.Control type="file" size="lg" /> </Form.Group> </> ); } export default FormFileExample;

import Form from 'react-bootstrap/Form';

function FormFileExample() {
  return (
    <>
      <Form.Group controlId="formFile" className="mb-3">
        <Form.Label>Default file input example</Form.Label>
        <Form.Control type="file" />
      </Form.Group>
      <Form.Group controlId="formFileMultiple" className="mb-3">
        <Form.Label>Multiple files input example</Form.Label>
        <Form.Control type="file" multiple />
      </Form.Group>
      <Form.Group controlId="formFileDisabled" className="mb-3">
        <Form.Label>Disabled file input example</Form.Label>
        <Form.Control type="file" disabled />
      </Form.Group>
      <Form.Group controlId="formFileSm" className="mb-3">
        <Form.Label>Small file input example</Form.Label>
        <Form.Control type="file" size="sm" />
      </Form.Group>
      <Form.Group controlId="formFileLg" className="mb-3">
        <Form.Label>Large file input example</Form.Label>
        <Form.Control type="file" size="lg" />
      </Form.Group>
    </>
  );
}

export default FormFileExample;

色

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; function ColorPickerExample() { return ( <> <Form.Label htmlFor="exampleColorInput">Color picker</Form.Label> <Form.Control type="color" id="exampleColorInput" defaultValue="#563d7c" title="Choose your color" /> </> ); } export default ColorPickerExample;

import Form from 'react-bootstrap/Form';

function ColorPickerExample() {
  return (
    <>
      <Form.Label htmlFor="exampleColorInput">Color picker</Form.Label>
      <Form.Control
        type="color"
        id="exampleColorInput"
        defaultValue="#563d7c"
        title="Choose your color"
      />
    </>
  );
}

export default ColorPickerExample;

API

FormControl