Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Forms

Floating Labels

Any Paragon component or export may be added to the code example.

<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.Switch>Check this switch</Form.Switch><br/>

    <Form.Switch disabled>disabled switch</Form.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.Checkbox>Check me out</Form.Checkbox>

  </Form.Group>

  <div className="d-flex">

    <Button variant="primary" type="submit">

      Submit

    </Button>

  </div>

</Form>

Regular Labels

Any Paragon component or export may be added to the code example.

<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.Switch>Check this switch</Form.Switch><br/>

    <Form.Switch disabled>disabled switch</Form.Switch>

  </Form.Group>



  <Form.Group id="formGridCheckbox-2">

      <Form.Checkbox>Check me out</Form.Checkbox>

  </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-valid-color:     theme-color("success") !default;
$custom-control-indicator-checked-invalid-color:   theme-color("danger") !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-icon-valid-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-valid-color}'/></svg>"), "#", "%23") !default;
$custom-checkbox-indicator-icon-invalid-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-invalid-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-radio-indicator-icon-valid-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-valid-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-radio-indicator-icon-invalid-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-invalid-color}'/%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;
$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;
$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-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;
$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-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;
$form-autosuggest-icon-width:  2.4rem;
$form-autosuggest-icon-height:  $form-autosuggest-icon-width;
$form-autosuggest-spinner-width:  1.25rem;
$form-autosuggest-spinner-height:  $form-autosuggest-spinner-width;
$form-autosuggest-border-width:  .125rem;
FormGroup Props API
  • children node Required

    Specifies contents of the component.

  • className string

    Specifies class name to append to the base element.

  • as elementType

    Specifies base element for the component.

    Default'div'
  • controlId string

    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

    Specifies whether to display components in invalid state, this affects styling.

    Defaultfalse
  • isValid bool

    Specifies whether to display components in valid state, this affects styling.

    Defaultfalse
  • size enum'sm' | 'lg'

    Specifies size for the component.

FormControl Props API
  • className string

    Specifies class name to append to the base element.

  • as elementType

    Specifies base element for the control component.

    Default'input'
  • onChange func

    Specifies function that is triggered on input value change.

  • defaultValue string | number

    Specifies default value of the input component.

  • value string | number

    Specifies current value of the input component.

  • id string

    Specifies id of the control component.

  • controlClassName string

    Specifies class name for the control component.

  • size enum'sm' | 'lg'

    Specifies size for the control component.

  • leadingElement node

    Specifies leading element to display for the input component.

  • trailingElement node

    Specifies trailing element to display for the input component.

  • floatingLabel node

    Specifies floating label to display for the input component.

  • plaintext bool

    Specifies whether to render input as plain text.

    Defaultfalse
  • isValid bool

    Specifies whether to display control in valid state, this affects styling.

  • isInvalid bool

    Specifies whether to display control in invalid state, this affects styling.

  • autoResize bool

    Only for as="textarea". Specifies whether the input can be resized according to the height of content.

    Defaultfalse
FormControlFeedback Props API
  • children node Required

    Specifies contents of the component.

  • className string

    Specifies class name to append to the base element.

  • hasIcon bool

    Specifies whether to show an icon next to the text.

    Defaulttrue
  • type enum'default' | 'valid' | 'invalid' | 'warning' | 'criteria-empty' | 'criteria-valid' | 'criteria-invalid'

    Specifies feedback type, this affects styling.

  • icon node

    Specifies icon to show, will only be shown if hasIcon prop is set to true.

  • muted bool

    Specifies whether to show feedback with muted styling.

    Defaultfalse
FormLabel Props API
  • className string

    Specifies class name to append to the base element.

  • children node Required

    Specifies contents of the component.

  • isInline bool

    Specifies whether the component should be displayed with inline styling.

    Defaultfalse
  • size enum'sm' | 'lg'

    Specifies size of the component.

FormText Props API
  • children node Required

    Specifies contents of the component.

  • className string

    Specifies class name to append to the base element.

  • hasIcon bool

    Specifies whether to show an icon next to the text.

    Defaulttrue
  • type enum'default' | 'valid' | 'invalid' | 'warning' | 'criteria-empty' | 'criteria-valid' | 'criteria-invalid'

    Specifies text type, this affects styling.

    Default'default'
  • icon node

    Specifies icon to show, will only be shown if hasIcon prop is set to true.

  • muted bool

    Specifies whether to show text with muted styling.

    Defaultfalse

Usage Insights#

Form

Project NameParagon VersionInstance Count
frontend-app-account20.36.03
frontend-app-admin-portal20.26.34
frontend-app-authn20.36.26
frontend-app-communications20.30.11
frontend-app-course-authoring20.32.05
frontend-app-discussions20.15.05
frontend-app-gradebook19.25.42
frontend-app-learner-dashboard20.32.03
frontend-app-learner-record20.32.01
frontend-app-library-authoring20.30.12
frontend-app-profile20.32.01
frontend-app-publisher20.28.51
frontend-lib-content-components20.34.03
prospectus20.32.34

FormControl

Project NameParagon VersionInstance Count
credentials19.19.11
frontend-app-account20.36.012
frontend-app-admin-portal20.26.338
frontend-app-admin-portal20.26.31
frontend-app-authn20.36.25
frontend-app-communications20.30.13
frontend-app-course-authoring20.32.011
frontend-app-discussions20.15.06
frontend-app-gradebook19.25.45
frontend-app-gradebook19.25.41
frontend-app-learner-dashboard20.32.02
frontend-app-learner-dashboard20.32.01
frontend-app-learner-portal-enterprise20.36.04
frontend-app-library-authoring20.30.18
frontend-app-ora-grading20.30.03
frontend-app-payment20.30.12
frontend-app-profile20.32.01
frontend-app-publisher20.28.55
frontend-app-support-tools20.26.09
frontend-lib-content-components20.34.023
frontend-lib-special-exams20.22.41
prospectus20.32.38
prospectus20.32.31

FormControlFeedback

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.26.35
frontend-app-authn20.36.21
frontend-app-learner-dashboard20.32.01
frontend-app-ora-grading20.30.01

FormGroup

Project NameParagon VersionInstance Count
credentials19.19.11
frontend-app-account20.36.010
frontend-app-admin-portal20.26.338
frontend-app-authn20.36.26
frontend-app-communications20.30.15
frontend-app-course-authoring20.32.020
frontend-app-discussions20.15.08
frontend-app-gradebook19.25.43
frontend-app-gradebook19.25.41
frontend-app-learner-dashboard20.32.02
frontend-app-learner-dashboard20.32.01
frontend-app-learner-portal-enterprise20.36.06
frontend-app-library-authoring20.30.17
frontend-app-ora-grading20.30.04
frontend-app-payment20.30.11
frontend-app-profile20.32.06
frontend-app-publisher20.28.55
frontend-app-support-tools20.26.09
frontend-lib-content-components20.34.025
www20.32.02
frontend-lib-special-exams20.22.41
prospectus20.32.311
prospectus20.32.31

FormLabel

Project NameParagon VersionInstance Count
frontend-app-account20.36.08
frontend-app-admin-portal20.26.312
frontend-app-communications20.30.13
frontend-app-course-authoring20.32.012
frontend-app-gradebook19.25.42
frontend-app-gradebook19.25.41
frontend-app-learner-dashboard20.32.02
frontend-app-learner-dashboard20.32.01
frontend-app-learner-portal-enterprise20.36.01
frontend-app-library-authoring20.30.14
frontend-app-ora-grading20.30.05
frontend-app-profile20.32.03
frontend-app-publisher20.28.55
frontend-lib-content-components20.34.010
frontend-lib-special-exams20.22.41
prospectus20.32.37

FormRow

Project NameParagon VersionInstance Count
frontend-app-course-authoring20.32.02
frontend-app-library-authoring20.30.12
frontend-lib-content-components20.34.02
prospectus20.32.33

FormText

Project NameParagon VersionInstance Count
frontend-app-account20.36.04
frontend-app-admin-portal20.26.320
frontend-app-course-authoring20.32.011
frontend-app-library-authoring20.30.13
Leave feedback

Contents

All components (A-Z)