diff --git a/docs/content/3.components/input-tags.md b/docs/content/3.components/input-tags.md index 1f642dd3..c73185dc 100644 --- a/docs/content/3.components/input-tags.md +++ b/docs/content/3.components/input-tags.md @@ -51,6 +51,17 @@ props: --- :: +### Max Length :badge{label="Soon" class="align-text-top"} + +Use the `max-length` prop to set the maximum number of characters allowed in a tag. + +::component-code +--- +props: + maxLength: 4 +--- +:: + ### Color Use the `color` prop to change the ring color when the InputTags is focused. diff --git a/src/runtime/components/InputTags.vue b/src/runtime/components/InputTags.vue index 17bbd1c7..973d3dfb 100644 --- a/src/runtime/components/InputTags.vue +++ b/src/runtime/components/InputTags.vue @@ -18,6 +18,8 @@ export interface InputTagsProps extends P as?: any /** The placeholder text when the input is empty. */ placeholder?: string + /** The maximum number of character allowed. */ + maxLength?: number /** * @defaultValue 'primary' */ @@ -182,6 +184,7 @@ defineExpose({ ref="inputRef" v-bind="{ ...$attrs, ...ariaAttrs }" :placeholder="placeholder" + :max-length="maxLength" :class="ui.input({ class: props.ui?.input })" />