Forms

Floating Labels

<Form>
  <Form.Row>
    <Form.Group as={Col} controlId="formGridEmail">
      <Form.Control
        type="email"
        floatingLabel="Email"
      />
      <Form.Text>
        This is the email that we'll send emails to.
      </Form.Text>
    </Form.Group>

    <Form.Group
      as={Col}
      controlId="formGridPassword"
      isInvalid
    >
      <Form.Control
        type="password"
        floatingLabel="Password"
      />
      <Form.Control.Feedback type="invalid">
        We don't like that password. Try a different one.
      </Form.Control.Feedback>
    </Form.Group>
  </Form.Row>

  <Form.Group
    controlId="formGridAddress1"
    isValid
  >
    <Form.Control floatingLabel="Address" />
    <Form.Control.Feedback type="valid">
      This is a nice place!
    </Form.Control.Feedback>
  </Form.Group>

  <Form.Row>
    <Form.Group as={Col} controlId="formGridCity">
      <Form.Control floatingLabel="City" />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridState">
      <Form.Control floatingLabel="State" as="select">
        <option value="">Choose...</option>
        <option>...</option>
      </Form.Control>
    </Form.Group>

    <Form.Group as={Col} controlId="formGridZip">
      <Form.Control floatingLabel="Zip" />
    </Form.Group>
  </Form.Row>

  <Form.Group controlId="formSwitch">
    <Form.Check
      type="switch"
      id="custom-switch"
      label="Check this switch"
    />
    <Form.Check
      disabled
      type="switch"
      label="disabled switch"
      id="disabled-custom-switch"
    />
  </Form.Group>

  <Form.Group controlId="whichColor">
    <Form.Label>
      Which color would you like?
    </Form.Label>
    <Form.RadioSet name="color">
      <Form.Radio value="red">Red</Form.Radio>
      <Form.Radio value="green">Green</Form.Radio>
      <Form.Radio value="blue">Blue</Form.Radio>
    </Form.RadioSet>
    <Form.Control.Feedback>
      The color you choose.
    </Form.Control.Feedback>
  </Form.Group>

  <Form.Group id="formGridCheckbox">
    <Form.Check type="checkbox" id="formGridCheckboxCheck" label="Check me out" />
  </Form.Group>
  <div className="d-flex">
    <Button variant="primary" type="submit">
      Submit
    </Button>
  </div>
</Form>

<Form>
  <Form.Row>
    <Form.Group as={Col} controlId="formGridEmail">
      <Form.Control
        type="email"
        floatingLabel="Email"
      />
      <Form.Text>
        This is the email that we'll send emails to.
      </Form.Text>
    </Form.Group>

    <Form.Group
      as={Col}
      controlId="formGridPassword"
      isInvalid
    >
      <Form.Control
        type="password"
        floatingLabel="Password"
      />
      <Form.Control.Feedback type="invalid">
        We don't like that password. Try a different one.
      </Form.Control.Feedback>
    </Form.Group>
  </Form.Row>

  <Form.Group
    controlId="formGridAddress1"
    isValid
  >
    <Form.Control floatingLabel="Address" />
    <Form.Control.Feedback type="valid">
      This is a nice place!
    </Form.Control.Feedback>
  </Form.Group>

  <Form.Row>
    <Form.Group as={Col} controlId="formGridCity">
      <Form.Control floatingLabel="City" />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridState">
      <Form.Control floatingLabel="State" as="select">
        <option value="">Choose...</option>
        <option>...</option>
      </Form.Control>
    </Form.Group>

    <Form.Group as={Col} controlId="formGridZip">
      <Form.Control floatingLabel="Zip" />
    </Form.Group>
  </Form.Row>

  <Form.Group controlId="formSwitch">
    <Form.Check
      type="switch"
      id="custom-switch"
      label="Check this switch"
    />
    <Form.Check
      disabled
      type="switch"
      label="disabled switch"
      id="disabled-custom-switch"
    />
  </Form.Group>

  <Form.Group controlId="whichColor">
    <Form.Label>
      Which color would you like?
    </Form.Label>
    <Form.RadioSet name="color">
      <Form.Radio value="red">Red</Form.Radio>
      <Form.Radio value="green">Green</Form.Radio>
      <Form.Radio value="blue">Blue</Form.Radio>
    </Form.RadioSet>
    <Form.Control.Feedback>
      The color you choose.
    </Form.Control.Feedback>
  </Form.Group>

  <Form.Group id="formGridCheckbox">
    <Form.Check type="checkbox" id="formGridCheckboxCheck" label="Check me out" />
  </Form.Group>
  <div className="d-flex">
    <Button variant="primary" type="submit">
      Submit
    </Button>
  </div>
</Form>

Regular Labels

<Form>
  <Form.Row>
    <Form.Group as={Col} controlId="formGridEmail-2">
      <Form.Label>Email</Form.Label>
      <Form.Control type="email" placeholder="Enter email" />
      <Form.Text muted>
        This is the email that we'll send emails to.
      </Form.Text>
    </Form.Group>

    <Form.Group isInvalid as={Col} controlId="formGridPassword-2">
      <Form.Label>Password</Form.Label>
      <Form.Control type="password" placeholder="Password" />
      <Form.Control.Feedback type="invalid">
        We don't like that password. Try a different one.
      </Form.Control.Feedback>
    </Form.Group>
  </Form.Row>

  <Form.Group controlId="formGridAddress1-2">
    <Form.Label>Address</Form.Label>
    <Form.Control placeholder="1234 Main St" />
    <Form.Control.Feedback type="valid">
      This is a nice place!
    </Form.Control.Feedback>
  </Form.Group>

  <Form.Row>
    <Form.Group as={Col} controlId="formGridCity-2">
      <Form.Label>City</Form.Label>
      <Form.Control />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridState-2">
      <Form.Label>State</Form.Label>
      <Form.Control as="select" defaultValue="Choose...">
        <option>Choose...</option>
        <option>...</option>
      </Form.Control>
    </Form.Group>

    <Form.Group as={Col} controlId="formGridZip-2">
      <Form.Label>Zip</Form.Label>
      <Form.Control />
    </Form.Group>
  </Form.Row>

  <Form.Group controlId="formSwitch-2">
    <Form.Check
      type="switch"
      id="custom-switch-2"
      label="Check this switch"
    />
    <Form.Check
      disabled
      type="switch"
      label="disabled switch"
      id="disabled-custom-switch-2"
    />
  </Form.Group>

  <Form.Group id="formGridCheckbox-2">
    <Form.Check type="checkbox" id="formGridCheckboxCheck-2" label="Check me out" />
  </Form.Group>
  <div className="d-flex">
    <Button variant="primary" type="submit">
      Submit
    </Button>
  </div>
</Form>

<Form>
  <Form.Row>
    <Form.Group as={Col} controlId="formGridEmail-2">
      <Form.Label>Email</Form.Label>
      <Form.Control type="email" placeholder="Enter email" />
      <Form.Text muted>
        This is the email that we'll send emails to.
      </Form.Text>
    </Form.Group>

    <Form.Group isInvalid as={Col} controlId="formGridPassword-2">
      <Form.Label>Password</Form.Label>
      <Form.Control type="password" placeholder="Password" />
      <Form.Control.Feedback type="invalid">
        We don't like that password. Try a different one.
      </Form.Control.Feedback>
    </Form.Group>
  </Form.Row>

  <Form.Group controlId="formGridAddress1-2">
    <Form.Label>Address</Form.Label>
    <Form.Control placeholder="1234 Main St" />
    <Form.Control.Feedback type="valid">
      This is a nice place!
    </Form.Control.Feedback>
  </Form.Group>

  <Form.Row>
    <Form.Group as={Col} controlId="formGridCity-2">
      <Form.Label>City</Form.Label>
      <Form.Control />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridState-2">
      <Form.Label>State</Form.Label>
      <Form.Control as="select" defaultValue="Choose...">
        <option>Choose...</option>
        <option>...</option>
      </Form.Control>
    </Form.Group>

    <Form.Group as={Col} controlId="formGridZip-2">
      <Form.Label>Zip</Form.Label>
      <Form.Control />
    </Form.Group>
  </Form.Row>

  <Form.Group controlId="formSwitch-2">
    <Form.Check
      type="switch"
      id="custom-switch-2"
      label="Check this switch"
    />
    <Form.Check
      disabled
      type="switch"
      label="disabled switch"
      id="disabled-custom-switch-2"
    />
  </Form.Group>

  <Form.Group id="formGridCheckbox-2">
    <Form.Check type="checkbox" id="formGridCheckboxCheck-2" label="Check me out" />
  </Form.Group>
  <div className="d-flex">
    <Button variant="primary" type="submit">
      Submit
    </Button>
  </div>
</Form>

Theme Variables (SCSS)#

$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;
$input-font-family:                     $input-btn-font-family !default;
$input-font-size:                       $input-btn-font-size !default;
$input-font-weight:                     $font-weight-base !default;
$input-line-height:                     $input-btn-line-height !default;

$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
$input-font-size-sm:                    $input-btn-font-size-sm !default;
$input-line-height-sm:                  $input-btn-line-height-sm !default;

$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
$input-font-size-lg:                    $input-btn-font-size-lg !default;
$input-line-height-lg:                  $input-btn-line-height-lg !default;

$input-bg:                              $white !default;
$input-disabled-bg:                     theme-color("gray", "background") !default;

$input-color:                           theme-color("gray", "text") !default;
$input-border-color:                    $gray-500 !default;
$input-border-width:                    $input-btn-border-width !default;
$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;

$input-border-radius:                   $border-radius !default;
$input-border-radius-lg:                $border-radius-lg !default;
$input-border-radius-sm:                $border-radius-sm !default;

$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              $component-active-bg !default;
$input-focus-color:                     $input-color !default;
$input-focus-width:                     1px !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

$input-placeholder-color:               theme-color("gray", "light-text") !default;
$input-plaintext-color:                 $body-color !default;

$input-height-border:                   $input-border-width * 2 !default;

$input-height-inner:                    calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{calc($input-padding-y / 2)}) !default;

$input-height:                          calc(
  #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}
) !default;
$input-height-sm:                       calc(
  #{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}
) !default;
$input-height-lg:                       calc(
  #{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}
) !default;

$input-hover-width:                     1px !default;
$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$form-text-margin-top:                  .25rem !default;

$form-check-input-gutter:               1.25rem !default;
$form-check-input-margin-y:             .3rem !default;
$form-check-input-margin-x:             .25rem !default;

$form-check-inline-margin-x:            .75rem !default;
$form-check-inline-input-margin-x:      .3125rem !default;

$form-check-position-axis:              .375rem !default;
$form-check-focus-border-radius:        .0625rem !default;
$form-check-border-width:               .125rem !default;

$form-grid-gutter-width:                10px !default;
$form-group-margin-bottom:              1rem !default;

$input-group-addon-color:               $input-color !default;
$input-group-addon-bg:                  theme-color("gray", "background") !default;
$input-group-addon-border-color:        $input-border-color !default;

$custom-forms-transition:               background-color .15s ease-in-out,
  border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$custom-control-gutter:                 .5rem !default;
$custom-control-spacer-x:               1rem !default;
$custom-control-cursor:                 null !default;

$custom-control-indicator-size:         1.25rem !default;
$custom-control-indicator-bg:           $input-bg !default;

$custom-control-indicator-bg-size:      100% !default;
$custom-control-indicator-box-shadow:   $input-box-shadow !default;
$custom-control-indicator-border-color: $gray-700 !default;
$custom-control-indicator-border-width: 2px !default;

$custom-control-label-color:            null !default;
$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
$custom-control-label-disabled-color:           theme-color("gray", "light-text") !default;

$custom-control-indicator-checked-color:        $component-active-bg !default;
$custom-control-indicator-checked-bg:           $component-active-bg !default;
$custom-control-indicator-checked-disabled-bg:  rgba($primary, .5) !default;
$custom-control-indicator-checked-box-shadow:   none !default;
$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;

$custom-control-indicator-focus-box-shadow:     0 0 0 4px rgba(0, 0, 0, .1) !default;
$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;

$custom-control-indicator-active-color:         $component-active-color !default;
$custom-control-indicator-active-bg:            $component-active-bg !default;
$custom-control-indicator-active-box-shadow:    none !default;
$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
$custom-checkbox-indicator-border-radius:       0 !default;
$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='#{$custom-control-indicator-checked-color}'/></svg>"), "#", "%23") !default;

$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
$custom-checkbox-indicator-icon-indeterminate:         str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='#{$custom-checkbox-indicator-indeterminate-color}'/></svg>"), "#", "%23") !default;
$custom-checkbox-indicator-indeterminate-box-shadow:   none !default;
$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;

$custom-radio-indicator-border-radius:          50% !default;
$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default;

$custom-switch-indicator-icon-off:              str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-switch-indicator-icon-on:               str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-active-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
$custom-switch-indicator-border-radius:         calc($custom-control-indicator-size / 2) !default;
$custom-switch-indicator-size:                  calc(
  #{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}
) !default;
$custom-switch-indicator-checked-bg:            theme-color("success") !default;

$custom-select-padding-y:           $input-padding-y !default;
$custom-select-padding-x:           $input-padding-x !default;
$custom-select-font-family:         $input-font-family !default;
$custom-select-font-size:           $input-font-size !default;
$custom-select-height:              $input-height !default;

// Extra padding to account for the presence of the background-image based indicator
$custom-select-indicator-padding:   1rem !default;
$custom-select-font-weight:         $input-font-weight !default;
$custom-select-line-height:         $input-line-height !default;
$custom-select-color:               $input-color !default;
$custom-select-disabled-color:      theme-color("gray", "light-text") !default;
$custom-select-bg:                  $input-bg !default;
$custom-select-disabled-bg:         theme-color("gray", "background") !default;
$custom-select-bg-size:             24px 24px !default; // In pixels because image dimensions
$custom-select-indicator-color:     theme-color("gray", "hover") !default;

$custom-select-indicator:           str-replace(url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="#{$custom-select-indicator-color}"/></svg>'), "#", "%23") !default;

// Used so we can have multiple background elements (e.g., arrow and feedback icon)
$custom-select-background:          $custom-select-indicator no-repeat right
  $input-padding-y center / $custom-select-bg-size !default;

$custom-select-feedback-icon-padding-right: calc(
  (1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}
) !default;
$custom-select-feedback-icon-position:      center right
  ($custom-select-padding-x + $custom-select-indicator-padding) !default;
$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;

$custom-select-border-width:        $input-border-width !default;
$custom-select-border-color:        $input-border-color !default;
$custom-select-border-radius:       $border-radius !default;
$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;

$custom-select-focus-border-color:  $input-focus-border-color !default;
$custom-select-focus-width:         $input-focus-width !default;
$custom-select-focus-box-shadow:    $input-btn-focus-box-shadow !default;

$custom-select-padding-y-sm:        $input-padding-y-sm !default;
$custom-select-padding-x-sm:        $input-padding-x-sm !default;
$custom-select-font-size-sm:        $input-font-size-sm !default;
$custom-select-height-sm:           $input-height-sm !default;

$custom-select-padding-y-lg:        $input-padding-y-lg !default;
$custom-select-padding-x-lg:        $input-padding-x-lg !default;
$custom-select-font-size-lg:        $input-font-size-lg !default;
$custom-select-height-lg:           $input-height-lg !default;

$custom-range-track-width:          100% !default;
$custom-range-track-height:         .5rem !default;
$custom-range-track-cursor:         pointer !default;
$custom-range-track-bg:             theme-color("gray", "graphic") !default;
$custom-range-track-border-radius:  1rem !default;
$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;

$custom-range-thumb-width:                   1rem !default;
$custom-range-thumb-height:                  $custom-range-thumb-width !default;
$custom-range-thumb-bg:                      $component-active-bg !default;
$custom-range-thumb-border:                  0 !default;
$custom-range-thumb-border-radius:           1rem !default;
$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
$custom-range-thumb-disabled-bg:             theme-color("gray", "default") !default;

$custom-file-height:                $input-height !default;
$custom-file-height-inner:          $input-height-inner !default;
$custom-file-focus-border-color:    $input-focus-border-color !default;
$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
$custom-file-disabled-bg:           $input-disabled-bg !default;

$custom-file-padding-y:             $input-padding-y !default;
$custom-file-padding-x:             $input-padding-x !default;
$custom-file-line-height:           $input-line-height !default;
$custom-file-font-family:           $input-font-family !default;
$custom-file-font-weight:           $input-font-weight !default;
$custom-file-color:                 $input-color !default;
$custom-file-bg:                    $input-bg !default;
$custom-file-border-width:          $input-border-width !default;
$custom-file-border-color:          $input-border-color !default;
$custom-file-border-radius:         $input-border-radius !default;
$custom-file-box-shadow:            $input-box-shadow !default;
$custom-file-button-color:          $custom-file-color !default;
$custom-file-button-bg:             $input-group-addon-bg !default;
$custom-file-text: (
  en: "Browse"
) !default;

// Form validation

$form-feedback-margin-top:          $form-text-margin-top !default;
$form-feedback-font-size:           $small-font-size !default;
$form-feedback-valid-color:         theme-color("success") !default;
$form-feedback-invalid-color:       theme-color("danger") !default;

$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
$form-feedback-icon-valid:          str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
$form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;

$form-validation-states: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    ),
  ),
  $form-validation-states
);

// Form tooltips must come after regular tooltips
$form-feedback-tooltip-padding-y:     .25rem !default;
$form-feedback-tooltip-padding-x:     .5rem !default;
$form-feedback-tooltip-font-size:     $font-size-sm !default;
$form-feedback-tooltip-line-height:   $line-height-base !default;
$form-feedback-tooltip-opacity:       .9 !default;
$form-feedback-tooltip-border-radius: $border-radius !default;

FormGroup Props API

children node Required Required
Specifies contents of the component.
className string Required
Specifies class name to append to the base element.
as elementType Required
Specifies base element for the component.
Default'div'
controlId string Required
Specifies id to use in the group, it will be used as htmlFor in FormLabel and as id in input components. Will be autogenerated if none is supplied.
isInvalid bool Required
Specifies whether to display components in invalid state, this affects styling.
Defaultfalse
isValid bool Required
Specifies whether to display components in valid state, this affects styling.
Defaultfalse
size enum Required'sm' | 'lg'
Specifies size for the component.

FormControl Props API

className string Required
Specifies class name to append to the base element.
as elementType Required
Specifies base element for the control component.
Default'input'
onChange func Required
Specifies function that is triggered on input value change.
defaultValue string Required | number Required Required
Specifies default value of the input component.
value string Required | number Required Required
Specifies current value of the input component.
id string Required
Specifies id of the control component.
controlClassName string Required
Specifies class name for the control component.
size enum Required'sm' | 'lg'
Specifies size for the control component.
leadingElement node Required
Specifies leading element to display for the input component.
trailingElement node Required
Specifies trailing element to display for the input component.
floatingLabel node Required
Specifies floating label to display for the input component.
plaintext bool Required
Specifies whether to render input as plain text.
Defaultfalse
isValid bool Required
Specifies whether to display control in valid state, this affects styling.
isInvalid bool Required
Specifies whether to display control in invalid state, this affects styling.
autoResize bool Required
Only for as="textarea". Specifies whether the input can be resized according to the height of content.
Defaultfalse

FormControlFeedback Props API

children node Required Required
Specifies contents of the component.
className string Required
Specifies class name to append to the base element.
hasIcon bool Required
Specifies whether to show an icon next to the text.
Defaulttrue
type enum Required'default' | 'valid' | 'invalid' | 'warning' | 'criteria-empty' | 'criteria-valid' | 'criteria-invalid'
Specifies feedback type, this affects styling.
icon node Required
Specifies icon to show, will only be shown if hasIcon prop is set to true.
muted bool Required
Specifies whether to show feedback with muted styling.
Defaultfalse

FormLabel Props API

className string Required
Specifies class name to append to the base element.
children node Required Required
Specifies contents of the component.
isInline bool Required
Specifies whether the component should be displayed with inline styling.
Defaultfalse
size enum Required'sm' | 'lg'
Specifies size of the component.

FormText Props API

children node Required Required
Specifies contents of the component.
className string Required
Specifies class name to append to the base element.
hasIcon bool Required
Specifies whether to show an icon next to the text.
Defaulttrue
type enum Required'default' | 'valid' | 'invalid' | 'warning' | 'criteria-empty' | 'criteria-valid' | 'criteria-invalid'
Specifies text type, this affects styling.
Default'default'
icon node Required
Specifies icon to show, will only be shown if hasIcon prop is set to true.
muted bool Required
Specifies whether to show text with muted styling.
Defaultfalse

Paragon Design System

Forms

Floating Labels

Regular Labels

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Forms

Floating Labels#

Regular Labels#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Floating Labels

Regular Labels