<Check> Component

<Check> is an interactive control in order to select multiple options.

Here the demo:

Preview
checkcheckcheckchecktoggle check

Installing <Check> Component

There are 2 ways to install <Check> component into your react app project:

  • Install the Specific Package of <Check> Component
  • Install the Whole Reusable-UI Component Pack, including the <Check> Component

Variant Properties

The alternative appearances of the <Check> layout without changing the <Check>'s functionality.

checkStyle Property

Sets the alternative appearances of the <Check>.

The possible values are:

  • undefined
  • 'regular'
  • 'switch'
  • 'button'
  • 'toggleButton'

Here the preview:

Preview
A <Check> with regular styleA <Check> with switch styleA <Check> with button styleA <Check> with toggleButton style

Show code

size Property

Defines the alternative size of the <Check>.

The possible values are:

  • undefined
  • 'sm'
  • 'md'
  • 'lg'

Here the preview:

Preview
A <Check> with sm sizeA <Check> with md sizeA <Check> with lg size

Show code

theme Property

Defines the contextual theme of the <Check>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview
A <Check> with primary themeA <Check> with secondary themeA <Check> with success themeA <Check> with info themeA <Check> with warning themeA <Check> with danger themeA <Check> with light themeA <Check> with dark theme

Show code

gradient Property

Activates a 3D mode of the <Check>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
A <Check> with gradient modeA <Check> with gradient modeA <Check> with gradient modeA <Check> with gradient modeA <Check> with gradient modeA <Check> with gradient modeA <Check> with gradient modeA <Check> with gradient mode

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Check>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
A <Check> with outlined modeA <Check> with outlined modeA <Check> with outlined modeA <Check> with outlined modeA <Check> with outlined modeA <Check> with outlined modeA <Check> with outlined modeA <Check> with outlined mode

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Check>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
A <Check> with mild modeA <Check> with mild modeA <Check> with mild modeA <Check> with mild modeA <Check> with mild modeA <Check> with mild modeA <Check> with mild modeA <Check> with mild mode

Show code

nude Property

Activates an nude mode (background-less, padding-less, and border-less) of the <Check>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
A <Check> with nude-less modeA <Check> with nude-less modeA <Check> with nude-less modeA <Check> with nude-less modeA <Check> with nude-less modeA <Check> with nude-less modeA <Check> with nude-less modeA <Check> with nude-less mode

Show code

State Properties

The conditions of the <Check> behavior or functionality.

enabled Property

Defines the enabled/disabled state of the <Check>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
A <Check> with disabled stateA <Check> with disabled stateA <Check> with disabled stateA <Check> with disabled stateA <Check> with disabled stateA <Check> with disabled stateA <Check> with disabled stateA <Check> with disabled state

Show code

inheritEnabled Property

Influences the <Check>'s disabled state by <ancestor enabled={false}>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
A <Check> with inherit disabled
A <Check> with inherit disabled
A <Check> with inherit disabled
A <Check> with inherit disabled
A <Check> with inherit disabled
A <Check> with inherit disabled
A <Check> with inherit disabled
A <Check> with inherit disabled

Show code

readOnly Property

Defines the readOnly/mutable state of the <Check>.

The possible values are:

  • undefined
  • true
  • false

inheritReadOnly Property

Influences the <Check>'s readOnly by <ancestor readOnly={true}>.

The possible values are:

  • undefined
  • true
  • false

active Property

Defines the current active state of the <Check>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
A <Check> with active stateA <Check> with active stateA <Check> with active stateA <Check> with active stateA <Check> with active stateA <Check> with active stateA <Check> with active stateA <Check> with active state

Show code

inheritActive Property

Influences the <Check>'s active state by <ancestor active={true}>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
A <Check> with inherit active
A <Check> with inherit active
A <Check> with inherit active
A <Check> with inherit active
A <Check> with inherit active
A <Check> with inherit active
A <Check> with inherit active
A <Check> with inherit active

Show code

enableValidation Property

Activates the valid/invalid indicator of the <Check>.

The possible values are:

  • undefined
  • true
  • false

isValid Property

Marks the validity status of the <Check>.

The possible values are:

  • undefined
  • null
  • true
  • false

Here the preview:

Preview
A <Check> marked as neutralA <Check> marked as validA <Check> marked as invalid

Show code

inheritValidation Property

Influences the <Check>'s valid/invalid indicator by <ancestor isValid={true|false} enableValidation={true}>.

The possible values are:

  • undefined
  • true
  • false

Variables

There are several variables of <Check> you can customize. Changing the variables affects all <Check> instance and other components that depend on <Check>.

Here the exposed variables:

  • Spacings
  • Animations

The example of accessing, modifying, & adding variables:

Show code