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

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)