Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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

As Radio

As Checkbox with isIndeterminate

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;
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.

SelectableBoxSet Props API
  • name
    string Required

    Specifies a name for the group of SelectableBox'es.

  • children
    node

    Content of the SelectableBoxSet.

  • onChange
    func

    A function that receives event of the clicked SelectableBox and can be used to handle the value change.

    Default() => {}
  • value
    string | number | array

    Indicates selected SelectableBox'es.

  • defaultValue
    string | number

    Specifies default values for the SelectableBox'es.

  • type
    enum'radio' | 'checkbox'

    Indicates the input type: checkbox or radio.

    Default'radio'
  • columns
    number

    Specifies number of SelectableBox'es in a row.

    Class that is responsible for the columns number: pgn__selectable_box-set--{columns}. Max number of columns: 12.

    Default2
  • className
    string

    A class that is be appended to the base element.

Contents

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)