Home›Docs›Form›Textarea Component

Textarea Component

Last updated: 1 month ago

Category: Form

The TEXTAREA component extends native textarea functionality with enhanced features including a toolbar, character limit indicators, and built-in input validation.

Textarea Component: More Display Variants, Validation, Event, and Method Usage Examples1 month ago Textarea Component1 month ago Input Component: More Display Variants, Validation, Event, and Method Usage Examples1 month ago Input Component1 month ago

Basic Usage

The oc-textarea represents a custom textarea component in this framework, which wraps the native textarea element to provide a unified appearance and supports a right-side toolbar.

Output
HTML

```
                
                
            
```

Default Value

Use the value attribute for initialization, or write the initial value directly inside the tags.

Output
HTML

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
```
                
                
            
```

disabled and readonly

These boolean attributes are supported with the same behavior as native text fields.

Output
HTML

```
                
                
            
```

Getting Values

You can get the component's name, value, disabled, and readOnly values like native elements.

Note: The O in readOnly is uppercase.

Output
HTML
JS

```
                
                
            
```

                
                let vals = document.querySelector('#vals');
                getvals.onclick=function(){
                    this.innerHTML = `name:${vals.name},value:${vals.value},disabled:${vals.disabled},readOnly:${vals.readOnly}`
                }

Placeholder Text

The placeholder text for the input component is defined using the placeholder attribute, with a default value of: Please enter....

Output
HTML

```
                
                
            
```

Size Options

The textarea component's size can be set using the size attribute, which supports three sizes: sm, md (default), and lg.

Different sizes affect text line height and margins differently.

Output
HTML

```
                
                
            
```

Using Labels

The label attribute can be used to set a title for the textarea. The appearance differs between single-line and multi-line states.

Output
HTML

```
                
                
            
```

Using Meaning Icons

The mean attribute can be used to set a semantic icon for the form field. In multi-line state, a label must be present for the icon to display.

Output
HTML

```
                
                
            
```

By default, the mean node only displays an icon. If you need click events, use the task attribute to define the click handler.

The task function's main purpose is to get the input control's required value and set it through this function.

The function supports one parameter - an object with properties btn (mean button) and el (the input control itself).

Output
HTML

```
                
                
            
```

Common Methods

Common component methods:

set: Set properties (takes key-value pairs or array)
reset: Reset properties (no params)
clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Common Events

Common component events:

connected: Component connected (no params)
disconnected: Component disconnected (no params)
adopted: Component moved (no params)
set: Property set (receives value)
cleared: Property cleared (no params)
reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})

Tags: Native, Vanilla, Web Components

Rate Component: Display Variations, Events, and Method Examples

1 month ago

Textarea Component: More Display Variants, Validation, Event, and Method Usage Examples