diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index a00c652046..99ac70d740 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -36,6 +36,18 @@ const selectArray = [
},
},
+ {
+ props: {
+ inputLabel: 'With helper text',
+ helperText: 'Choose the option that fits best',
+ options: [
+ 'foo',
+ 'bar',
+ 'baz',
+ ],
+ },
+ },
+
{
props: {
inputLabel: 'Simple (top placement)',
@@ -508,6 +520,7 @@ export default {
:readonly="attributes.readonly"
:autocomplete="attributes.autocomplete"
:aria-label="attributes['aria-label']"
+ :aria-describedby="[attributes['aria-describedby'], helperText ? `${inputId}-helper-text` : null].filter(Boolean).join(' ') || undefined"
:aria-autocomplete="attributes['aria-autocomplete']"
:aria-controls="attributes['aria-controls']"
:aria-owns="attributes['aria-owns']"
@@ -552,7 +565,17 @@ export default {
{{ t('No results') }}
-
+
+
+
+
+ {{ helperText }}
+
+
+
@@ -761,6 +784,14 @@ export default {
default: null,
},
+ /**
+ * Additional helper text shown beneath the select.
+ */
+ helperText: {
+ type: String,
+ default: '',
+ },
+
/**
* Pass true if you are using an external label
*/
@@ -962,6 +993,16 @@ export default {
},
computed: {
+ /**
+ * Consumer-provided slots forwarded to vue-select, excluding `footer`
+ * which we render ourselves to host the helper text.
+ *
+ * @return {string[]}
+ */
+ forwardedSlots() {
+ return Object.keys(this.$slots).filter((name) => name !== 'footer')
+ },
+
inputRequired() {
if (!this.required) {
return null
@@ -1083,6 +1124,16 @@ export default {