feat(ui): add `label` convenience prop to input

This commit is contained in:
upsiflu 2024-12-29 18:04:32 +01:00
parent fe8c7aa564
commit 9e3f2cfb57
2 changed files with 33 additions and 4 deletions

View File

@ -12,6 +12,7 @@ const { icon, placeholder, ...restProps } = defineProps<{
password?: true,
search?: true,
numeric?: true,
label?: string,
}>()
// TODO(A11y): Add `inputmode="numeric" pattern="[0-9]*"` to input if model type is number:
@ -45,6 +46,10 @@ const model = defineModel<string|number>()
<slot name="label" />
</span>
<span v-if="restProps.label" class="label">
{{ restProps.label }}
</span>
<input
v-bind="{...$attrs, ...attributes}"
v-model="model"

View File

@ -35,6 +35,30 @@ Add a [Bootstrap icon](https://icons.getbootstrap.com/) to an input to make its
<Input icon="bi-search" placeholder="Search" />
## Label slot
```vue-html{2-4}
<Input>
<template #label>
User name
</template>
</Input>
```
<Input>
<template #label>
User name
</template>
</Input>
If you just have a string, we have a convenience prop, so instead you can write:
```vue-html
<Input label="User name" />
```
<Input label="User name" />
## Input-right slot
You can add a template on the right-hand side of the input to guide the user's input.