Text Input
Model-value
Represents the value of the input field
Model text: Lorem ipsum
<script setup lang="ts">
import { NmorphTextInput } from "@nmorph/nmorph-ui-kit";
const text = ref("Lorem ipsum");
</script><template>
<div class="text-input-model-value-overview">
<p class="nmorph-title-3">Model text: {{ text }}</p>
<NmorphTextInput v-model="text" />
</div>
</template>Thickness
Sets the thickness of the input field.
<script setup lang="ts">
import { NmorphTextInput } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="text-input-thickness-overview">
<NmorphTextInput thickness="thick" placeholder="Enter text" />
<NmorphTextInput thickness="basic" placeholder="Enter text" />
<NmorphTextInput thickness="thin" placeholder="Enter text" />
</div>
</template>Disabled
Disables the input field if set to true.
<script setup lang="ts">
import { NmorphTextInput } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="text-input-disabled-overview">
<NmorphTextInput placeholder="I am disabled" disabled />
</div>
</template>Type-password
If set to true, the text in the input field will be hidden as a password.
<script setup lang="ts">
import { NmorphButton, NmorphTextInput } from "@nmorph/nmorph-ui-kit";
const typePassword = ref(true);
</script><template>
<div class="text-input-type-password-overview">
<NmorphButton
text="Toggle type"
@click="typePassword = !typePassword"
class="type-input-button"
/>
<NmorphTextInput :type-password="typePassword" />
</div>
</template>Clearable
If set to true, a button will appear to clear the input field.
<script setup lang="ts">
import { NmorphTextInput } from "@nmorph/nmorph-ui-kit";
const text = ref("Lorem ipsum");
</script><template>
<div class="text-input-clearable-overview">
<NmorphTextInput clearable v-model="text" />
</div>
</template>