diff --git a/docs/components/input.md b/docs/components/input.md index 7cc9a6c..21a255c 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -5,6 +5,7 @@ import InputDisabledExample from './input/examples/InputDisabledExample.vue'; import InputHelperExample from './input/examples/InputHelperExample.vue'; import InputPrefixExample from './input/examples/InputPrefixExample.vue'; import InputSuffixExample from './input/examples/InputSuffixExample.vue' +import InputRequiredExample from './input/examples/InputRequiredExample.vue' # Vue Input - Flowbite @@ -30,7 +31,7 @@ import { ref } from 'vue' const name = ref('') ``` @@ -60,7 +61,18 @@ import { Input } from 'flowbite-vue' ``` - +## Required + +```vue + + +``` + + ## Slot - Helper ```vue @@ -112,4 +124,3 @@ import { Input, Button } from 'flowbite-vue' ``` - diff --git a/docs/components/input/examples/InputRequiredExample.vue b/docs/components/input/examples/InputRequiredExample.vue new file mode 100644 index 0000000..62411d1 --- /dev/null +++ b/docs/components/input/examples/InputRequiredExample.vue @@ -0,0 +1,12 @@ + + diff --git a/src/components/Input/Input.vue b/src/components/Input/Input.vue index 45cf5b5..6831936 100644 --- a/src/components/Input/Input.vue +++ b/src/components/Input/Input.vue @@ -10,6 +10,7 @@ v-model="model" :disabled="disabled" :type="type" + :required='required' :class="[inputClasses, $slots.prefix ? 'pl-10' : '']" /> @@ -33,6 +34,7 @@ interface InputProps { disabled?: boolean; type?: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'; size?: InputSize; + required?: boolean; modelValue: string; } @@ -41,6 +43,7 @@ const props = withDefaults(defineProps(), { disabled: false, type: 'text', size: 'md', + required: false, modelValue: '', })