フローティングラベル

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

例

<FloatingLabel>要素で<Form.Control>要素を囲み、Bootstrapのテキストフォームフィールドでフローティングラベルを使用できるようにします。各<Form.Control>にはplaceholderが必要です。CSSのみのフローティングラベルのメソッドでは、:placeholder-shown疑似要素を使用します。

結果

読み込み中...

ライブエディター

import FloatingLabel from 'react-bootstrap/FloatingLabel'; import Form from 'react-bootstrap/Form'; function FormFloatingBasicExample() { return ( <> <FloatingLabel controlId="floatingInput" label="Email address" className="mb-3" > <Form.Control type="email" placeholder="name@example.com" /> </FloatingLabel> <FloatingLabel controlId="floatingPassword" label="Password"> <Form.Control type="password" placeholder="Password" /> </FloatingLabel> </> ); } export default FormFloatingBasicExample;

import FloatingLabel from 'react-bootstrap/FloatingLabel';
import Form from 'react-bootstrap/Form';

function FormFloatingBasicExample() {
  return (
    <>
      <FloatingLabel
        controlId="floatingInput"
        label="Email address"
        className="mb-3"
      >
        <Form.Control type="email" placeholder="name@example.com" />
      </FloatingLabel>
      <FloatingLabel controlId="floatingPassword" label="Password">
        <Form.Control type="password" placeholder="Password" />
      </FloatingLabel>
    </>
  );
}

export default FormFloatingBasicExample;

テキストエリア

既定では、<textarea>は<input>と同じ高さになります。<textarea>にカスタムの高さを設定するには、rows属性を使用しないでください。その代わりに、明示的なheight（インラインまたはカスタムCSS経由）を設定します。

結果

読み込み中...

ライブエディター

import FloatingLabel from 'react-bootstrap/FloatingLabel'; import Form from 'react-bootstrap/Form'; function FormFloatingTextareaExample() { return ( <> <FloatingLabel controlId="floatingTextarea" label="Comments" className="mb-3" > <Form.Control as="textarea" placeholder="Leave a comment here" /> </FloatingLabel> <FloatingLabel controlId="floatingTextarea2" label="Comments"> <Form.Control as="textarea" placeholder="Leave a comment here" style={{ height: '100px' }} /> </FloatingLabel> </> ); } export default FormFloatingTextareaExample;

import FloatingLabel from 'react-bootstrap/FloatingLabel';
import Form from 'react-bootstrap/Form';

function FormFloatingTextareaExample() {
  return (
    <>
      <FloatingLabel
        controlId="floatingTextarea"
        label="Comments"
        className="mb-3"
      >
        <Form.Control as="textarea" placeholder="Leave a comment here" />
      </FloatingLabel>
      <FloatingLabel controlId="floatingTextarea2" label="Comments">
        <Form.Control
          as="textarea"
          placeholder="Leave a comment here"
          style={{ height: '100px' }}
        />
      </FloatingLabel>
    </>
  );
}

export default FormFloatingTextareaExample;

選択

<Form.Control>以外のフローティングラベルは、<Form.Select>でのみ使用できます。これらは同じように機能しますが、<input>とは異なり、ラベルは常にフローティング状態に表示されます。

結果

読み込み中...

ライブエディター

import FloatingLabel from 'react-bootstrap/FloatingLabel'; import Form from 'react-bootstrap/Form'; function FormFloatingSelectExample() { return ( <FloatingLabel controlId="floatingSelect" label="Works with selects"> <Form.Select aria-label="Floating label select example"> <option>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </Form.Select> </FloatingLabel> ); } export default FormFloatingSelectExample;

import FloatingLabel from 'react-bootstrap/FloatingLabel';
import Form from 'react-bootstrap/Form';

function FormFloatingSelectExample() {
  return (
    <FloatingLabel controlId="floatingSelect" label="Works with selects">
      <Form.Select aria-label="Floating label select example">
        <option>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </Form.Select>
    </FloatingLabel>
  );
}

export default FormFloatingSelectExample;

レイアウト

Bootstrap グリッドシステムで作業する場合は、フォーム要素を列クラス内に配置します。

結果

読み込み中...

ライブエディター

import Col from 'react-bootstrap/Col'; import FloatingLabel from 'react-bootstrap/FloatingLabel'; import Form from 'react-bootstrap/Form'; import Row from 'react-bootstrap/Row'; function FormFloatingLayoutExample() { return ( <Row className="g-2"> <Col md> <FloatingLabel controlId="floatingInputGrid" label="Email address"> <Form.Control type="email" placeholder="name@example.com" /> </FloatingLabel> </Col> <Col md> <FloatingLabel controlId="floatingSelectGrid" label="Works with selects" > <Form.Select aria-label="Floating label select example"> <option>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </Form.Select> </FloatingLabel> </Col> </Row> ); } export default FormFloatingLayoutExample;

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

function FormFloatingLayoutExample() {
  return (
    <Row className="g-2">
      <Col md>
        <FloatingLabel controlId="floatingInputGrid" label="Email address">
          <Form.Control type="email" placeholder="name@example.com" />
        </FloatingLabel>
      </Col>
      <Col md>
        <FloatingLabel
          controlId="floatingSelectGrid"
          label="Works with selects"
        >
          <Form.Select aria-label="Floating label select example">
            <option>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </Form.Select>
        </FloatingLabel>
      </Col>
    </Row>
  );
}

export default FormFloatingLayoutExample;

レンダリングのカスタマイズ

レンダリングをより詳細に制御する必要がある場合は、<FormFloating>コンポーネントを使用して入力とラベルを囲みます。また、<Form.Control>が最初に配置されているため、兄弟セレクター（例：〜）を使用できます。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; function FormFloatingCustom() { return ( <> <Form.Floating className="mb-3"> <Form.Control id="floatingInputCustom" type="email" placeholder="name@example.com" /> <label htmlFor="floatingInputCustom">Email address</label> </Form.Floating> <Form.Floating> <Form.Control id="floatingPasswordCustom" type="password" placeholder="Password" /> <label htmlFor="floatingPasswordCustom">Password</label> </Form.Floating> </> ); } export default FormFloatingCustom;

import Form from 'react-bootstrap/Form';

function FormFloatingCustom() {
  return (
    <>
      <Form.Floating className="mb-3">
        <Form.Control
          id="floatingInputCustom"
          type="email"
          placeholder="name@example.com"
        />
        <label htmlFor="floatingInputCustom">Email address</label>
      </Form.Floating>
      <Form.Floating>
        <Form.Control
          id="floatingPasswordCustom"
          type="password"
          placeholder="Password"
        />
        <label htmlFor="floatingPasswordCustom">Password</label>
      </Form.Floating>
    </>
  );
}

export default FormFloatingCustom;

API

FormFloating

FloatingLabel