<EditableTextControl> Component

<EditableTextControl> is a generic text editor layout component with built-in variants, states, and valid/invalid indicator.

If you plan to create a custom textBox, this base component is a great starting point. It already have validation icon. You need to define the position of the validation icon by injecting a custom CSS.

Variant Properties

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

size Property

Defines the alternative size of the <EditableTextControl>.

The possible values are:

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

Here the preview:

Preview
An <EditableTextControl> with sm size
An <EditableTextControl> with md size
An <EditableTextControl> with lg size

Show code

theme Property

Defines the contextual theme of the <EditableTextControl>.

The possible values are:

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

Here the preview:

Preview
An <EditableTextControl> with primary theme
An <EditableTextControl> with secondary theme
An <EditableTextControl> with success theme
An <EditableTextControl> with info theme
An <EditableTextControl> with warning theme
An <EditableTextControl> with danger theme
An <EditableTextControl> with light theme
An <EditableTextControl> with dark theme

Show code

gradient Property

Activates a 3D mode of the <EditableTextControl>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
An <EditableTextControl> with gradient mode
An <EditableTextControl> with gradient mode
An <EditableTextControl> with gradient mode
An <EditableTextControl> with gradient mode
An <EditableTextControl> with gradient mode
An <EditableTextControl> with gradient mode
An <EditableTextControl> with gradient mode
An <EditableTextControl> with gradient mode

Show code

outlined Property

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

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
An <EditableTextControl> with outlined mode
An <EditableTextControl> with outlined mode
An <EditableTextControl> with outlined mode
An <EditableTextControl> with outlined mode
An <EditableTextControl> with outlined mode
An <EditableTextControl> with outlined mode
An <EditableTextControl> with outlined mode
An <EditableTextControl> with outlined mode

Show code

mild Property

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

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
An <EditableTextControl> without mild mode
An <EditableTextControl> without mild mode
An <EditableTextControl> without mild mode
An <EditableTextControl> without mild mode
An <EditableTextControl> without mild mode
An <EditableTextControl> without mild mode
An <EditableTextControl> without mild mode
An <EditableTextControl> without mild mode

Show code

nude Property

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

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
An <EditableTextControl> with nude mode
An <EditableTextControl> with nude mode
An <EditableTextControl> with nude mode
An <EditableTextControl> with nude mode
An <EditableTextControl> with nude mode
An <EditableTextControl> with nude mode
An <EditableTextControl> with nude mode
An <EditableTextControl> with nude mode

Show code

State Properties

The conditions of the <EditableTextControl> behavior or functionality.

enabled Property

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

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
An <EditableTextControl> with disabled state
An <EditableTextControl> with disabled state
An <EditableTextControl> with disabled state
An <EditableTextControl> with disabled state
An <EditableTextControl> with disabled state
An <EditableTextControl> with disabled state
An <EditableTextControl> with disabled state
An <EditableTextControl> with disabled state

Show code

inheritEnabled Property

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

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
An <EditableTextControl> with inherit enabled
An <EditableTextControl> with inherit enabled
An <EditableTextControl> with inherit enabled
An <EditableTextControl> with inherit enabled
An <EditableTextControl> with inherit enabled
An <EditableTextControl> with inherit enabled
An <EditableTextControl> with inherit enabled
An <EditableTextControl> with inherit enabled

Show code

readOnly Property

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

The possible values are:

  • undefined
  • true
  • false

inheritReadOnly Property

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

The possible values are:

  • undefined
  • true
  • false

enableValidation Property

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

The possible values are:

  • undefined
  • true
  • false

isValid Property

Marks the validity status of the <EditableTextControl>.

The possible values are:

  • undefined
  • null
  • true
  • false

Here the preview:

Preview
An <EditableTextControl> marked as neutral
An <EditableTextControl> marked as valid
An <EditableTextControl> marked as invalid

Show code

inheritValidation Property

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

The possible values are:

  • undefined
  • true
  • false

Variables

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

Here the exposed variables:

  • Accessibilities
  • Animations

The example of accessing, modifying, & adding variables:

Show code