Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Set heights using classes like .form-control-lg and .form-control-sm.

Disabled

React
HTML

<>
  <form className="bg-white p-3 w-100">
    <div className="form-row">
      <div className="col form-group">
        <Label
          tag="label"
          widths={[
            'xs',
            'sm',
            'md',
            'lg',
            'xl'
          ]}
        >
          Default
        </Label>
        <input
          className="form-control"
          disabled
          id="formGroupExampleInput"
          placeholder="Disabled "
          type="text"
        />
      </div>
    </div>
    <div className="form-row">
      {' '}
      <div className="col form-group form-group-sm">
        <Label
          htmlFor="formGroupExampleInput3"
          tag="label"
          widths={[
            'xs',
            'sm',
            'md',
            'lg',
            'xl'
          ]}
        >
          Default
        </Label>
        <input
          className="form-control-sm form-control"
          disabled
          id="formGroupExampleInput3"
          placeholder="Disabled"
          type="text"
        />
      </div>
    </div>
  </form>
  {' '}
</>

 <form class="bg-white p-3 w-100"><div class="form-row"><div class="col form-group"><label class="">Default</label><input type="text" disabled="" class="form-control" id="formGroupExampleInput" placeholder="Disabled "/></div></div><div class="form-row"> <div class="col form-group form-group-sm"><label for="formGroupExampleInput3" class="">Default</label><input type="text" disabled="" class="form-control-sm form-control" id="formGroupExampleInput3" placeholder="Disabled"/></div></div></form>

Active

React
HTML

<>
  {' '}
  <form className="p-3 bg-white w-100">
    <div className="form-row">
      <div className="col form-group">
        <Label
          htmlFor="formGroupExampleInput"
          tag="label"
          widths={[
            'xs',
            'sm',
            'md',
            'lg',
            'xl'
          ]}
        >
          Default
        </Label>
        <input
          className="focus active form-control"
          id="formGroupExampleInput"
          placeholder="Form Control Regular"
          type="text"
          value="active text input"
        />
      </div>
    </div>
    <div className="form-row">
      {' '}
      <div className="col form-group">
        {' '}
        <Label
          htmlFor="formGroupExampleInput3"
          tag="label"
          widths={[
            'xs',
            'sm',
            'md',
            'lg',
            'xl'
          ]}
        >
          Small
        </Label>
        {' '}
        <input
          className="focus form-control-sm form-control"
          id="formGroupExampleInput3"
          placeholder="Form Contol Small"
          type="text"
          value="active text input"
        />
        {' '}
      </div>
      {' '}
    </div>
    {' '}
  </form>
  {' '}
</>

  <form class="p-3 bg-white w-100"><div class="form-row"><div class="col form-group"><label for="formGroupExampleInput" class="">Default</label><input type="text" value="active text input" class="focus active form-control" id="formGroupExampleInput" placeholder="Form Control Regular"/></div></div><div class="form-row"> <div class="col form-group"> <label for="formGroupExampleInput3" class="">Small</label> <input type="text" value="active text input" class="focus form-control-sm form-control" id="formGroupExampleInput3" placeholder="Form Contol Small"/> </div> </div> </form>

Focus

React
HTML

<>
  {' '}
  <form className="p-3 bg-white w-100">
    <div className="form-row">
      <div className="col form-group">
        {' '}
        <Label
          htmlFor="formGroupExampleInput"
          tag="label"
          widths={[
            'xs',
            'sm',
            'md',
            'lg',
            'xl'
          ]}
        >
          {`Default> `}
        </Label>
        <input
          className="focus active form-control"
          id="formGroupExampleInput"
          placeholder="Focus text input"
          type="text"
        />
      </div>
    </div>
    <div className="form-row">
      <div className="col form-group">
        {' '}
        <Label
          htmlFor="formGroupExampleInput3"
          tag="label"
          widths={[
            'xs',
            'sm',
            'md',
            'lg',
            'xl'
          ]}
        >
          Small
        </Label>
        {' '}
        <input
          className="focus form-control-sm form-control"
          id="formGroupExampleInput3"
          placeholder="Focus text input"
          type="text"
        />
      </div>
      {' '}
    </div>
    {' '}
  </form>
</>

  <form class="p-3 bg-white w-100"><div class="form-row"><div class="col form-group"> <label for="formGroupExampleInput" class="">Default&gt; </label><input type="text" class="focus active form-control" id="formGroupExampleInput" placeholder="Focus text input"/></div></div><div class="form-row"><div class="col form-group"> <label for="formGroupExampleInput3" class="">Small</label> <input type="text" class="focus form-control-sm form-control" id="formGroupExampleInput3" placeholder="Focus text input"/></div> </div> </form>

Validation

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

React
HTML

<>
  <form className="p-3 bg-white w-100">
    <div className="form-row">
      <div className="col form-group">
        <Label
          htmlFor="formGroupExampleInput"
          tag="label"
          widths={[
            'xs',
            'sm',
            'md',
            'lg',
            'xl'
          ]}
        >
          Default
        </Label>
        <inputValid
          className="active form-control"
          id="formGroupExampleInput"
          placeholder="Focus text input"
          type="text"
        />
      </div>
    </div>
    <div className="form-row">
      <div className="col form-group">
        <Label
          htmlFor="formGroupExampleInput3"
          tag="label"
          widths={[
            'xs',
            'sm',
            'md',
            'lg',
            'xl'
          ]}
        >
          Small
        </Label>
        <inputInValid
          className="is-invalid form-control-sm form-control"
          id="formGroupExampleInput3"
          placeholder="Focus text input"
          type="text"
        />
      </div>
    </div>
    <PhoneInput
      icon="true"
      label="Default"
    />
  </form>
</>

 <form class="p-3 bg-white w-100"><div class="form-row"><div class="col form-group"><label for="formGroupExampleInput" class="">Default</label><input type="text" id="formGroupExampleInput" placeholder="Invalid Input" class=" form-control is-valid form-control"/></div></div><div class="form-row"><div class="col form-group"><label for="formGroupExampleInput3" class="">Small</label><input type="text" placeholder="Input invalid" class=" form-control is-invalid form-control"/></div></div><label>Default</label><div class=" input-group align-items-center mb-3"><i class="icon text-input__icon-left prs-icon-mobile "></i><input type="text" aria-label="phoneNumber" value="" class="form-control text-input__has-icon-left form-control"/><div class="invalid-feedback">This is not a valid 10-digit phone number.</div></div></form>

Documentation

JavaScript

Modifiers that can be passed as props to the <Input /> component.