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 Variable | Computed Value |
|---|---|
| | |
| | |
| | |
| | |
| | |
- as
ElementTypeSpecifies base element for the component.
- children
ReactNodeRequiredSpecifies contents of the component.
- className
stringSpecifies class name to append to the base element.
- controlId
stringSpecifies id to use in the group, it will be used as
htmlForinFormLabeland asidin input components. Will be autogenerated if none is supplied. - isInvalid
booleanDefaultfalseSpecifies whether to display components in invalid state, this affects styling.
- isValid
booleanDefaultfalseSpecifies whether to display components in valid state, this affects styling.
- size
typeof FORM_CONTROL_SIZES.SMALL|typeof FORM_CONTROL_SIZES.LARGESpecifies size for the component. Either
'sm'or'lg'.
This is a pass through component from React-Bootstrap; see original props documentation here. You can also pass any HTML attributes, such as onClick, role, etc. Which attributes are available depends on whether or not you have overriden the underlying HTML element using the as property.
- className
stringSpecifies class name to append to the base element.
- as
elementTypeDefault'input'Specifies base element for the control component.
- onChange
funcSpecifies function that is triggered on input value change.
- defaultValue
string|numberSpecifies default value of the input component.
- value
string|numberSpecifies current value of the input component.
- id
stringSpecifies id of the control component.
- controlClassName
stringSpecifies class name for the control component.
- size
enum'sm' | 'lg'Specifies size for the control component.
- leadingElement
nodeSpecifies leading element to display for the input component.
- trailingElement
nodeSpecifies trailing element to display for the input component.
- floatingLabel
nodeSpecifies floating label to display for the input component.
- plaintext
boolDefaultfalseSpecifies whether to render input as plain text.
- isValid
boolSpecifies whether to display control in valid state, this affects styling.
- isInvalid
boolSpecifies whether to display control in invalid state, this affects styling.
- autoResize
boolDefaultfalseOnly for
as="textarea". Specifies whether the input can be resized according to the height of content. - inputMask
stringSpecifies what format to use for the input mask.
- children
nodeRequiredSpecifies contents of the component.
- className
stringSpecifies class name to append to the base element.
- hasIcon
boolDefaulttrueSpecifies whether to show an icon next to the text.
- type
enum'default' | 'valid' | 'invalid' | 'warning' | 'criteria-empty' | 'criteria-valid' | 'criteria-invalid'Specifies feedback type, this affects styling.
- icon
nodeSpecifies icon to show, will only be shown if
hasIconprop is set totrue. - muted
boolDefaultfalseSpecifies whether to show feedback with muted styling.
- children
React.ReactNodeRequiredSpecifies contents of the component.
- isInline
booleanDefaultfalseSpecifies whether the component should be displayed with inline styling.
- className
stringSpecifies an additional
classNameto add to the base element.
- children
nodeRequiredSpecifies contents of the component.
- className
stringSpecifies class name to append to the base element.
- hasIcon
boolDefaulttrueSpecifies whether to show an icon next to the text.
- type
enum'default' | 'valid' | 'invalid' | 'warning' | 'criteria-empty' | 'criteria-valid' | 'criteria-invalid'Default'default'Specifies text type, this affects styling.
- icon
nodeSpecifies icon to show, will only be shown if
hasIconprop is set totrue. - muted
boolDefaultfalseSpecifies whether to show text with muted styling.
Usage Insights#
Form
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-account | 23.14.8 | 3 | |
| frontend-app-communications | 23.14.2 | 1 | |
| frontend-app-course-authoring | 23.15.1 | 84 | |
| ora_settings | 23.15.1 | 1 | |
| proctoring | 23.15.1 | 1 | |
| xpert_unit_summary | 23.15.1 | 1 | |
| frontend-app-discussions | 23.14.2 | 5 | |
| frontend-app-gradebook | 23.4.5 | 1 | |
| frontend-app-discussions | 23.16.0 | 11 | |
| frontend-app-learner-record | 23.15.2 | 1 | |
| frontend-app-library-authoring | 21.11.3 | 1 | |
| frontend-app-publisher | 23.14.8 | 1 | |
| frontend-app-support-tools | 23.4.2 | 3 |
FormControl
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-authn | 23.14.0 | 1 | |
| frontend-app-communications | 23.12.2 | 1 | |
| frontend-app-communications | 23.12.2 | 1 | |
| frontend-app-course-authoring | 23.15.1 | 1 |
FormControlFeedback
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-authn | 23.16.0 | 1 | |
| frontend-app-discussions | 23.16.0 | 1 | |
| frontend-app-learner-record | 23.4.5 | 1 |
FormGroup
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-discussions | 23.16.0 | 1 |
FormLabel
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-authn | 23.14.0 | 1 | |
| frontend-app-communications | 23.12.2 | 1 | |
| frontend-app-communications | 23.12.2 | 3 | |
| frontend-app-communications | 23.12.2 | 1 | |
| frontend-app-course-authoring | 23.15.1 | 3 |
FormRow
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-course-authoring | 23.15.1 | 7 | |
| frontend-app-support-tools | 23.4.2 | 2 |
FormText
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-account | 23.14.8 | 4 | |
| frontend-app-admin-portal | 22.20.3 | 34 | |
| frontend-app-course-authoring | 23.15.1 | 18 | |
| teams | 23.15.1 | 1 | |
| frontend-app-gradebook | 23.4.5 | 2 | |
| frontend-app-gradebook | 23.4.5 | 1 |