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
node
RequiredSpecifies contents of the component.
- className
string
Specifies class name to append to the base element.
- as
elementType
Specifies base element for the component.
- controlId
string
Specifies id to use in the group, it will be used as
htmlFor
inFormLabel
and asid
in input components. Will be autogenerated if none is supplied. - isInvalid
bool
DefaultfalseSpecifies whether to display components in invalid state, this affects styling.
- isValid
bool
DefaultfalseSpecifies 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
string
Specifies class name to append to the base element.
- as
elementType
Default'input'Specifies base element for the control component.
- 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
DefaultfalseSpecifies whether to render input as plain text.
- 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
DefaultfalseOnly for
as="textarea"
. Specifies whether the input can be resized according to the height of content. - inputMask
string
Specifies what format to use for the input mask.
- children
node
RequiredSpecifies contents of the component.
- className
string
Specifies class name to append to the base element.
- hasIcon
bool
DefaulttrueSpecifies 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
node
Specifies icon to show, will only be shown if
hasIcon
prop is set totrue
. - muted
bool
DefaultfalseSpecifies whether to show feedback with muted styling.
- className
string
Specifies class name to append to the base element.
- children
node
RequiredSpecifies contents of the component.
- isInline
bool
DefaultfalseSpecifies whether the component should be displayed with inline styling.
- children
node
RequiredSpecifies contents of the component.
- className
string
Specifies class name to append to the base element.
- hasIcon
bool
DefaulttrueSpecifies 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
node
Specifies icon to show, will only be shown if
hasIcon
prop is set totrue
. - muted
bool
DefaultfalseSpecifies whether to show text with muted styling.
Usage Insights#
Form
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.10.0 | 3 | |
frontend-app-admin-portal | 21.13.1 | 6 | |
frontend-app-authn | 22.11.2 | 6 | |
frontend-app-communications | 22.7.0 | 1 | |
frontend-app-course-authoring | 22.8.1 | 15 | |
ora_settings | 22.8.1 | 1 | |
proctoring | 22.8.1 | 1 | |
xpert_unit_summary | 22.8.1 | 1 | |
frontend-app-discussions | 22.7.0 | 5 | |
frontend-app-gradebook | 22.8.1 | 4 | |
frontend-app-learner-dashboard | 22.9.0 | 3 | |
frontend-app-learner-record | 22.10.0 | 1 | |
frontend-app-library-authoring | 21.11.3 | 2 | |
frontend-app-publisher | 21.13.1 | 1 | |
prospectus | 20.46.2 | 3 |
FormControl
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-admin-portal | 21.13.1 | 1 | |
frontend-app-course-authoring | 22.8.1 | 1 | |
frontend-app-learner-dashboard | 22.9.0 | 2 | |
prospectus | 20.46.2 | 1 |
FormControlFeedback
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-authn | 22.11.2 | 1 | |
frontend-app-learner-dashboard | 22.9.0 | 1 | |
frontend-app-ora-grading | 21.11.3 | 1 |
FormGroup
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-learner-dashboard | 22.9.0 | 1 | |
prospectus | 20.46.2 | 1 |
FormLabel
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-course-authoring | 22.8.1 | 3 | |
frontend-app-learner-dashboard | 22.9.0 | 2 | |
prospectus | 20.46.2 | 7 |
FormRow
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-course-authoring | 22.8.1 | 7 | |
frontend-app-library-authoring | 21.11.3 | 2 | |
prospectus | 20.46.2 | 3 |
FormText
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.10.0 | 4 | |
frontend-app-admin-portal | 21.13.1 | 33 | |
frontend-app-course-authoring | 22.8.1 | 19 | |
proctoring | 22.8.1 | 2 | |
teams | 22.8.1 | 1 | |
frontend-app-library-authoring | 21.11.3 | 2 |