Home›Docs›Form›Input Component

Input Component

Last updated: 1 month ago

Category: Form

The INPUT custom component is an enhanced wrapper of the native input element. While maintaining single-line text input functionality, it additionally provides toolbox features, character limit indicators, and input validation support.

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

Form text fields share similar editing methods. The same input component can be used for type=text/email/search/password/tel/url text field types.

oc-input represents the framework's custom text field component, which wraps the native input field to standardize appearance and support right-side toolbars.

Output
HTML

```
                
                
            
```

Default Value

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

Output
HTML

Natural history
```
                
                
            
```

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 input field component's size can be set via the size attribute, supporting sm, md (default), and lg sizes.

size=sm: Height 24px (2.4rem)
size=md: Height 40px (4.0rem)
size=lg: Height 56px (5.6rem)

Output
HTML

```
                
                
            
```

Using Indicators

The component has 4 types of indicators located at the head of the input, explained as follows:

icon: Represents an icon indicator, set via the icon attribute with an icon style class value, e.g.: icon="_icon global"
disk: Represents an image indicator, set via the disk attribute with an image URL value, e.g. disk=".../demo.jpg"
cube: Same usage as disk, the only difference being disk is a circular image while cube is square
image: Same usage as disk, just with height restrictions

Note: All four indicators can be used simultaneously, but it's recommended to use only one.

Output
HTML

```
                
                
            
```

Using label

The label attribute can add a text label before the component to indicate the nature of the input content.

Output
HTML

```
                
                
            
```

Using unit

The unit attribute can add a text label after the component to indicate the unit (or other) of the input content.

Output
HTML

```
                
                
            
```

Using type

The native input supports many types. This component defines text-type single-line input controls, so it supports all types except non-text types like type=checkbox, type=radio, type=file, etc.

Output
HTML

```
                
                
            
```

Using mean

Some native input controls display an indicator on the right side, such as a calendar icon for type=datetime or a clear icon for type=search.

The mean attribute displays an indicator icon on the right side, e.g. mean="_icon-search".

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

Radios(group) Component: Multiple Display States, Event, and Method Examples

1 month ago

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