`<EditableActionControl>` Component

<EditableActionControl> is an editable & clickable simple box layout component with built-in variants, states, valid/invalid indicator and clicking feedback.

If you plan to create a custom checkbox, this base component is a great starting point. It already have valid/invalid indicator and clicking feedback.

Installing `<EditableActionControl>` Component

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

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

Variant Properties

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

`size` Property

Defines the alternative size of the <EditableActionControl>.

The possible values are:

undefined
'sm'
'md'
'lg'

Here the preview:

An <EditableActionControl> with sm size

An <EditableActionControl> with md size

An <EditableActionControl> with lg size

Show code

`theme` Property

Defines the contextual theme of the <EditableActionControl>.

The possible values are:

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

Here the preview:

An <EditableActionControl> with primary theme

An <EditableActionControl> with secondary theme

An <EditableActionControl> with success theme

An <EditableActionControl> with info theme

An <EditableActionControl> with warning theme

An <EditableActionControl> with danger theme

An <EditableActionControl> with light theme

An <EditableActionControl> with dark theme

Show code

`gradient` Property

Activates a 3D mode of the <EditableActionControl>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

An <EditableActionControl> with gradient mode

Show code

`outlined` Property

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

The possible values are:

undefined
'inherit'
true
false

Here the preview:

An <EditableActionControl> with outlined mode

Show code

`mild` Property

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

The possible values are:

undefined
'inherit'
true
false

Here the preview:

An <EditableActionControl> without mild mode

Show code

`nude` Property

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

The possible values are:

undefined
true
false

Here the preview:

An <EditableActionControl> with nude mode

Show code

State Properties

The conditions of the <EditableActionControl> behavior or functionality.

`enabled` Property

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

The possible values are:

undefined
true
false

Here the preview:

An <EditableActionControl> with disabled state

Show code

`inheritEnabled` Property

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

The possible values are:

undefined
true
false

Here the preview:

An <EditableActionControl> with inherit enabled

Show code

`readOnly` Property

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

The possible values are:

undefined
true
false

`inheritReadOnly` Property

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

The possible values are:

undefined
true
false

`active` Property

Defines the current active state of the <EditableActionControl>.

The possible values are:

undefined
true
false

Here the preview:

An <EditableActionControl> with active state

Show code

`inheritActive` Property

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

The possible values are:

undefined
true
false

Here the preview:

An <EditableActionControl> with inherit active

Show code

`enableValidation` Property

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

The possible values are:

undefined
true
false

`isValid` Property

Marks the validity status of the <EditableActionControl>.

The possible values are:

undefined
null
true
false

Here the preview:

An <EditableActionControl> marked as neutral

An <EditableActionControl> marked as valid

An <EditableActionControl> marked as invalid

Show code

`inheritValidation` Property

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

The possible values are:

undefined
true
false

`pressed` Property

Shows the pressed indicator of the <EditableActionControl>.

The possible values are:

undefined
true
false

Here the preview:

An <EditableActionControl> without pressed indicator