Theme

npm_versionnpm Paragon package page

Floating Labels

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

Regular Labels

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

Theme Variables#

CSS VariableComputed Value










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

This is a pass through component from React-Bootstrap, see original props documentation here.

  • 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
  • inputMask string

    Specifies what format to use for the input mask.

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.46.33
frontend-app-admin-portal20.46.35
frontend-app-authn20.46.26
frontend-app-communications20.46.21
frontend-app-course-authoring21.5.68
frontend-app-discussions20.46.35
frontend-app-gradebook20.45.04
frontend-app-learner-dashboard20.46.23
frontend-app-learner-record20.46.31
frontend-app-library-authoring21.5.62
frontend-app-publisher20.46.31
frontend-lib-content-components21.5.63
prospectus20.46.24

FormControl

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.46.31
frontend-app-learner-dashboard20.46.22
frontend-lib-content-components21.5.61
prospectus20.46.21

FormControlFeedback

Project NameParagon VersionInstance Count
frontend-app-authn20.46.21
frontend-app-learner-dashboard20.46.21
frontend-app-ora-grading20.46.31

FormGroup

Project NameParagon VersionInstance Count
frontend-app-learner-dashboard20.46.21
prospectus20.46.21

FormLabel

Project NameParagon VersionInstance Count
frontend-app-course-authoring21.5.61
frontend-app-learner-dashboard20.46.22
prospectus20.46.27

FormRow

Project NameParagon VersionInstance Count
frontend-app-course-authoring21.5.65
frontend-app-library-authoring21.5.62
frontend-lib-content-components21.5.62
prospectus20.46.23

FormText

Project NameParagon VersionInstance Count
frontend-app-account20.46.34
frontend-app-admin-portal20.46.320
frontend-app-course-authoring21.5.611
frontend-app-library-authoring21.5.62