Form text

Create block-level or inline-level form text.

Overview

Block-level help text in forms can be created using <Form.Text>. Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.

Form text below inputs can be styled with <Form.Text>. This component includes display: block and adds some top margin for easy spacing from the inputs above.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; function FormTextExample() { return ( <> <Form.Label htmlFor="inputPassword5">Password</Form.Label> <Form.Control type="password" id="inputPassword5" aria-describedby="passwordHelpBlock" /> <Form.Text id="passwordHelpBlock" muted> Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. </Form.Text> </> ); } export default FormTextExample;

import Form from 'react-bootstrap/Form';

function FormTextExample() {
  return (
    <>
      <Form.Label htmlFor="inputPassword5">Password</Form.Label>
      <Form.Control
        type="password"
        id="inputPassword5"
        aria-describedby="passwordHelpBlock"
      />
      <Form.Text id="passwordHelpBlock" muted>
        Your password must be 8-20 characters long, contain letters and numbers,
        and must not contain spaces, special characters, or emoji.
      </Form.Text>
    </>
  );
}

export default FormTextExample;

API

FormText