Text and number inputs

This page covers:

• TextInput
• TextareaInput
• NumberInput

Props

TextInput

• placeholder?: string

TextareaInput

• placeholder?: string

NumberInput

• placeholder?: string
• min?: number
• max?: number
• step?: number

Exposed CSS variables

TextInput

• --DFV-text-input-width
• --DFV-text-input-background
• --DFV-text-input-foreground
• --DFV-text-input-border-color
• --DFV-text-input-hover-border-color
• --DFV-text-input-focus-border-color
• --DFV-text-input-focus
• --DFV-text-input-placeholder

TextareaInput

• --DFV-text-area-width
• --DFV-text-area-background
• --DFV-text-area-foreground
• --DFV-text-area-border-color
• --DFV-text-area-hover-border-color
• --DFV-text-area-focus-border-color
• --DFV-text-area-focus
• --DFV-text-area-placeholder

NumberInput

• --DFV-number-input-width
• --DFV-number-input-background
• --DFV-number-input-foreground
• --DFV-number-input-border-color
• --DFV-number-input-hover-border-color
• --DFV-number-input-focus-border-color
• --DFV-number-input-focus
• --DFV-number-input-placeholder

Example

vue

<script setup lang="ts">
import {
	NumberInput,
	TextInput,
	TextareaInput,
} from "@duplojs/form/vueDesignSystem";
import { ref } from "vue";

const text = ref("Hello");
const number = ref(42);
const description = ref("A longer message");
</script>

<template>
	<div style="display: grid; gap: 12px;">
		<TextInput
			v-model="text"
			placeholder="Your name"
		/>

		<NumberInput
			v-model="number"
			:min="0"
			:max="100"
		/>

		<TextareaInput
			v-model="description"
			placeholder="Description"
		/>
	</div>
</template>

Theme advice

To keep a consistent look, override these three components together if you are changing the primary text input style.