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 |
|---|---|
| | |
| | |
| | |
| | |
| | |
- children
nodeRequiredSpecifies contents of the component.
- className
stringSpecifies class name to append to the base element.
- as
elementTypeDefault'div'Specifies base element for the component.
- 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
boolDefaultfalseSpecifies whether to display components in invalid state, this affects styling.
- isValid
boolDefaultfalseSpecifies whether to display components in valid state, this affects styling.
- size
enum'sm' | 'lg'Specifies size for the component.
This is a pass through component from React-Bootstrap, see original props documentation here.
- 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.
- className
stringSpecifies class name to append to the base element.
- children
nodeRequiredSpecifies contents of the component.
- isInline
boolDefaultfalseSpecifies whether the component should be displayed with inline styling.
- size
enum'sm' | 'lg'Specifies size of the component.
- 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 | 20.46.3 | 3 | |
| frontend-app-admin-portal | 20.46.3 | 5 | |
| frontend-app-authn | 20.46.2 | 6 | |
| frontend-app-communications | 20.46.2 | 1 | |
| frontend-app-course-authoring | 21.5.6 | 8 | |
| frontend-app-discussions | 20.46.3 | 5 | |
| frontend-app-gradebook | 20.45.0 | 4 | |
| frontend-app-learner-dashboard | 20.46.2 | 3 | |
| frontend-app-learner-record | 20.46.3 | 1 | |
| frontend-app-library-authoring | 21.5.6 | 2 | |
| frontend-app-publisher | 20.46.3 | 1 | |
| frontend-lib-content-components | 21.5.6 | 3 | |
| prospectus | 20.46.2 | 4 |
FormControl
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-admin-portal | 20.46.3 | 1 | |
| frontend-app-learner-dashboard | 20.46.2 | 2 | |
| frontend-lib-content-components | 21.5.6 | 1 | |
| prospectus | 20.46.2 | 1 |
FormControlFeedback
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-authn | 20.46.2 | 1 | |
| frontend-app-learner-dashboard | 20.46.2 | 1 | |
| frontend-app-ora-grading | 20.46.3 | 1 |
FormGroup
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-learner-dashboard | 20.46.2 | 1 | |
| prospectus | 20.46.2 | 1 |
FormLabel
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-course-authoring | 21.5.6 | 1 | |
| frontend-app-learner-dashboard | 20.46.2 | 2 | |
| prospectus | 20.46.2 | 7 |
FormRow
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-course-authoring | 21.5.6 | 5 | |
| frontend-app-library-authoring | 21.5.6 | 2 | |
| frontend-lib-content-components | 21.5.6 | 2 | |
| prospectus | 20.46.2 | 3 |
FormText
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-account | 20.46.3 | 4 | |
| frontend-app-admin-portal | 20.46.3 | 20 | |
| frontend-app-course-authoring | 21.5.6 | 11 | |
| frontend-app-library-authoring | 21.5.6 | 2 |