SelectableBox
A box that has selection states. It can be used as an alternative to a radio button or checkbox set.
The SelectableBox
can contain any kind of content as long as it is not clickable. In other words, there should be no clickable targets distinct from selection.
Basic Usage
As Checkbox
Any Paragon component or export may be added to the code example.
As Radio
Any Paragon component or export may be added to the code example.
As Checkbox
As Checkbox
with isIndeterminate
Any Paragon component or export may be added to the code example.
As Checkbox
with ariaLabelledby
Any Paragon component or export may be added to the code example.
Without active outline
The showActiveBoxState
property only affects SelectableBox
that have inputHidden
set to false
.
If a component has no input, the border is always rendered in an active state.
Any Paragon component or export may be added to the code example.
Theme Variables (SCSS)#
$selectable-box-padding: 1rem !default;$selectable-box-border-radius: .25rem !default;$selectable-box-space: .75rem !default;$min-cols-number: 1 !default;$max-cols-number: 12 !default;
Props API#
- children
node
RequiredContent of the
SelectableBox
. - value
string
|number
A value that is passed to the input tag.
- checked
bool
DefaultfalseControls whether
SelectableBox
is checked. - type
enum
'radio' | 'checkbox'Default'radio'Indicates the input type: checkbox or radio.
- onClick
func
Default() => {}Function that is called when the
SelectableBox
is clicked. - onFocus
func
Default() => {}Function that is called when the
SelectableBox
is focused. - inputHidden
bool
DefaulttrueControls display of the input (checkbox or radio button) on the
SelectableBox
. - isIndeterminate
bool
DefaultfalseIndicates a state for the 'checkbox'
type
whenSelectableBox
is neither checked nor unchecked. - isInvalid
bool
DefaultfalseAdds errors styles to the
SelectableBox
. - className
string
A class that is appended to the base element.
- showActiveBoxState
bool
DefaulttrueControls the visibility of the active state for the
SelectableBox
.
Usage Insights#
SelectableBox
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-enterprise-public-catalog | 21.13.1 | 2 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 2 | |
frontend-app-learner-record | 22.9.0 | 1 | |
frontend-app-library-authoring | 21.11.3 | 3 |
SelectableBoxSet
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-enterprise-public-catalog | 21.13.1 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 2 | |
frontend-app-learner-record | 22.9.0 | 1 | |
frontend-app-library-authoring | 21.11.3 | 1 |