Theme

npm_versionnpm Paragon package page

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#

SelectableBox Props API
  • children node Required

    Content of the SelectableBox.

  • value string | number

    A value that is passed to the input tag.

  • checked bool

    Controls whether SelectableBox is checked.

    Defaultfalse
  • type enum'radio' | 'checkbox'

    Indicates the input type: checkbox or radio.

    Default'radio'
  • onClick func

    Function that is called when the SelectableBox is clicked.

    Default() => {}
  • onFocus func

    Function that is called when the SelectableBox is focused.

    Default() => {}
  • inputHidden bool

    Controls display of the input (checkbox or radio button) on the SelectableBox.

    Defaulttrue
  • isIndeterminate bool

    Indicates a state for the 'checkbox' type when SelectableBox is neither checked nor unchecked.

    Defaultfalse
  • isInvalid bool

    Adds errors styles to the SelectableBox.

    Defaultfalse
  • className string

    A class that is appended to the base element.

  • showActiveBoxState bool

    Controls the visibility of the active state for the SelectableBox.

    Defaulttrue
SelectableBoxSet Props API
This component does not receive any props.

Usage Insights#

SelectableBox

Project NameParagon VersionInstance Count
frontend-app-enterprise-public-catalog21.13.12
frontend-app-learner-portal-enterprise21.13.12
frontend-app-learner-record22.9.01
frontend-app-library-authoring21.11.33

SelectableBoxSet

Project NameParagon VersionInstance Count
frontend-app-enterprise-public-catalog21.13.11
frontend-app-learner-portal-enterprise21.13.12
frontend-app-learner-record22.9.01
frontend-app-library-authoring21.11.31