Form.Checkbox
A simple checkbox for use with Form.CheckboxSet.
Note: extra props added to this component are passed as attributes to the
underlying input node. See MDN for documentation on available
input attributes.
Controlled Standalone Usage
Any Paragon component or export may be added to the code example.
Unlabeled control
Any Paragon component or export may be added to the code example.
Controlled Group Usage with useCheckboxSetValues
useCheckboxSetValues(initialValues[]) returns an array: [state, dispatchers].
dispatchers includes add(value) remove(value) set(values[]) and clear()
Any Paragon component or export may be added to the code example.
Uncontrolled Usage
Any Paragon component or export may be added to the code example.
Indeterminate Usage
Any Paragon component or export may be added to the code example.
Inline layout
Any Paragon component or export may be added to the code example.
Validation
Group Level Validation
Any Paragon component or export may be added to the code example.
Individual option validation
Any Paragon component or export may be added to the code example.
Label Position
The label is positioned to the right of the checkbox control by default. The label can be rendered on the left instead
by passing the floatLabelLeft prop.
Any Paragon component or export may be added to the code example.
Theme Variables#
| CSS Variable | Computed Value |
|---|---|
| | |
| | |
| | |
| | |
| | |
Props API#
- id
stringSpecifies id of the FormCheckbox component.
- children
nodeRequiredSpecifies contents of the component.
- className
stringSpecifies class name to append to the base element.
- controlClassName
stringSpecifies class name for control component.
- labelClassName
stringSpecifies class name for label component.
- description
nodeSpecifies description to show under the checkbox.
- isInvalid
boolDefaultfalseSpecifies whether to display checkbox in invalid state, this affects styling.
- isValid
boolDefaultfalseSpecifies whether to display checkbox in valid state, this affects styling.
- controlAs
elementTypeDefaultReact.forwardRef( ({ isIndeterminate, ...props }, ref) => { const { getCheckboxControlProps, hasCheckboxSetProvider } = useCheckboxSetContext(); const defaultRef = React.useRef(); const resolvedRef = ref || defaultRef; const { getControlProps } = useFormGroupContext(); let checkboxProps = getControlProps({ ...props, className: classNames('pgn__form-checkbox-input', props.className), }); if (hasCheckboxSetProvider) { checkboxProps = getCheckboxControlProps(checkboxProps); } React.useEffect(() => { // this if(resolvedRef.current) prevents console errors in testing if (resolvedRef.current) { resolvedRef.current.indeterminate = isIndeterminate; } }, [resolvedRef, isIndeterminate]); return ( <input type="checkbox" {...checkboxProps} ref={resolvedRef} /> ); }, )Specifies control element.
- floatLabelLeft
boolDefaultfalseSpecifies whether the floating label should be aligned to the left.
- disabled
boolDefaultfalseSpecifies whether the
FormCheckboxis disabled.
- isIndeterminate
boolDefaultfalseSpecifies whether the checkbox should be rendered in indeterminate state.
- className
stringSpecifies class name to append to the base element.
- children
nodeRequiredSpecifies contents of the component.
- className
stringSpecifies class name to append to the base element.
- name
stringRequiredSpecifies name for the component.
- value
string[]Specifies values for the checkboxes.
- defaultValue
string[]Specifies default values for the checkboxes.
- isInline
boolDefaultfalseSpecifies whether to display components with inline styling.
- onChange
funcSpecifies onChange event handler.
- onFocus
funcSpecifies onFocus event handler.
- onBlur
funcSpecifies onBlur event handler.
Usage Insights#
CheckboxControl
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-admin-portal | 22.20.3 | 3 | |
| frontend-app-course-authoring | 23.15.1 | 12 | |
| frontend-app-learner-portal-enterprise | 22.17.0 | 2 | |
| frontend-app-library-authoring | 21.11.3 | 2 |
FormCheckbox
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-account | 23.14.8 | 1 | |
| frontend-app-admin-portal | 22.20.3 | 17 | |
| frontend-app-authn | 23.14.0 | 1 | |
| frontend-app-authn | 23.15.2 | 3 | |
| frontend-app-communications | 23.14.2 | 6 | |
| frontend-app-course-authoring | 23.15.1 | 16 | |
| frontend-app-discussions | 23.14.2 | 3 | |
| frontend-app-gradebook | 23.4.5 | 1 | |
| frontend-app-learner-portal-enterprise | 22.17.0 | 3 | |
| frontend-app-support-tools | 23.4.2 | 1 |
FormCheckboxSet
| 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-communications | 23.12.2 | 1 | |
| frontend-app-communications | 23.14.2 | 1 | |
| frontend-app-course-authoring | 23.15.1 | 4 | |
| frontend-app-discussions | 23.14.9 | 1 |