27 lines
846 B
Vue
27 lines
846 B
Vue
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
/** Renders the error border. Pair it with a message below the field. */
|
|
invalid?: boolean;
|
|
type?: string;
|
|
}>(),
|
|
{ type: 'text' },
|
|
);
|
|
|
|
const model = defineModel<string | number | null>();
|
|
</script>
|
|
|
|
<template>
|
|
<input
|
|
v-model="model"
|
|
:type="type"
|
|
:aria-invalid="invalid || undefined"
|
|
class="bg-field block rounded-md border px-3 py-2 text-slate-700 shadow-xs transition-colors placeholder:text-slate-400 focus:outline-none disabled:bg-slate-200 disabled:text-slate-400"
|
|
:class="
|
|
invalid
|
|
? 'border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-100'
|
|
: 'border-slate-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-100'
|
|
"
|
|
/>
|
|
</template>
|