Input

Default use:

Example:

<h-input type="text" />

Sizes:

Example:

<h-input type="text" size="small" placeholder="Small" />

<h-input type="text" size="medium" placeholder="Medium" />

Attributes (placeholder):

Example:

<h-input type="text" placeholder="Example" />

Icons:

Example:

<h-input type="text" icon-left="fas fa-user" placeholder="Icon Left" />
<h-input type="text" icon-right="fas fa-user" placeholder="Icon Right" />
<h-input type="text" icon-left="fas fa-user" icon-right="fas fa-user" placeholder="Both Icons" />
<h-input type="text" icon-left="fas fa-user" icon-right="fas fa-user" icon-left-color="success" icon-right-color="success" placeholder="Colored Icons" />
<h-input type="text" icon-left="fas fa-user" icon-left-color="success" @click-icon-left="handleInput" icon-left-tag="button" placeholder="Clickable Icon" />

Types:

Example:

<h-input type="text" placeholder="Text" />
<h-input type="number" placeholder="Number" />
<h-input type="date" />

Behaviors:

Example:

<h-input type="text" icon="fas fa-user" behavior="default" placeholder="Default Behavior" />
<h-input type="text" icon="fas fa-user" block placeholder="Block Behavior" />
<h-input type="text" icon="fas fa-user" is-disabled placeholder="Disabled Behavior" disabled />

With Value and Listener (controlled use):

Example:

<template>
  <h-input type="text" :value="state.usingNormalData" @input="handleInputText" placeholder="Using Normal Data" />
  <span>{{ usingNormalData }}</span>

  <h-input type="text" v-model="state.usingVmodel" placeholder="Using v-model" />
  <span>{{ state.usingVmodel }}</span>
</template>

<script setup lang="ts">
const handleInputText = ($event: string) => {
  state.usingNormalData = $event
}

const state = reactive({
  usingNormalData: '',
  usingVmodel: '',
})
</script>

All html attrs:

Example:

<h-input id="my-specific-component" placeholder="Id" />